React Hooks

什么是Hooks ： 个人理解：有自己的state的函数式组件。无状态函数式组件，在加上state后，就成现在的Hooks什么是函数式组件： 即HOC高阶组件，可向其中传递组件，经过函数的再次封装得到一个新的组件要求： React要求要将hooks写在函数最外层，不能写在if-else等语句中，确保hooks的执行顺序

hooks 中的数据是只读的，一定要通过钩子函数去修改他

四个钩子函数

useState

状态钩子

import React,{useState} from 'react' function App(){ //创造一个状态，并赋初始值为0 //数组第一个值count接受初始值0，相当于this.state //数组第二个值setCount是个函数，可以改变状态的值，相当于this.setState const [count ,setCount ] = useState(0) const addCount = ()=>{ setCount(count+10) } return ( <div className = 'App'> <div>{count}</div> <button onClick = {addCount}>点击加10</button> </div> ) } export default App;

useContext

共享状态钩子

import React,{useContext} from 'react' function App(){ const AppContext = React.createContext() const Achild = ()=>{ const { name } = useContext(AppContext) return ( <div>这是组件A，name为：{name} </div> ) } return ( <AppContext.Provide value = {{name:'proger'}}> <Achild></Achild> </AppContext.Provide> ) } export default App;

共享AppContext.Provide 中的数据

useReducer

action钩子

import React,{useReducer} from 'react' function App(){ const reducer = (state , action)=>{ const actionFn = { add:function(){ return { ...state, count:state.count + 1 } } } return actionFn[action.type]() } //初始化state，并声明reducer const [state,dispatch] = useReducer(reducer,{count:0}) const addCount = ()=>{ dispatch({type:'add'}) } return ( <div> <div>{state.count}</div> <button onClick = {addCount}>点击+1</button> </div> ) } export default App;

useEffect

副作用钩子

useEffect 中函数是异步执行的，不影响浏览器视图更新 而原来的componentDidMount 、componentDidUpdate 是同步执行的

import React,{useEffect，setLoading,useState} from 'react' function App(){ const [loading,setLoading] = useState(true) //相当于componentDidMount ，每次render和初次加载时都会调用 //传入一个回调函数，第二个参数是个数组，可不加 //有数组时，那么回调函数会一句数组数据的发生变化而调用 useEffect(()=>{ setTimeout(()=>{ setLoading(false) },3000) }) return ( loading?<div>Loading</div>:<div>Loading Finished</div> ) } export default App;

自定义钩子函数

//封装自定义钩子 usePerson //根据业务需求，将自己组装的钩子函数封装成一个函数，返回对应需要的状态和修改状态的方法即可 function usePerson(name){ const [loading,setLoading] = useState(true); const [person,setPerson] = useState({}) useEffect(()=>{ setLoading(true); setTimeout(()=>{ setLoading(false) setPerson({name}) },3000); //effect 的返回函数 ，可作为卸载的生命周期 return ()=>{ console.log('组件被卸载了') } }，[name]) return [loading,person] } function AsyncPage({name}){ const [loading,person] = usePerson(name) return ( loading?<div>loading </div>:<div>{person.name}</div> ) }

---