react hooks 学习. FAQ
useState代替state
1 | function Example(){ |
useEffect代替常用生命周期函数
实现类似componentWillUnmount的效果,useEffect的第二个参数,它是一个数组,数组中可以写入很多状态对应的变量,意思是当状态值发生变化时,我们才进行解绑。但是当传空数组[]时,就是当组件将被销毁时才进行解绑,这也就实现了componentWillUnmount的生命周期函数1
2
3
4
5
6useEffect(()=>{
// 初始化,更新时
return ()=>{
// 类似于销毁时
}
},[]) // [] 状态发生变化,在达到条件时才触发
useContext 让父子组件传值更简单
useContext
跨越组件层级直接传递变量,实现共享1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const CountContext = createContext()
function Parent(){
const [ count , setCount ] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
<CountContext.Provider value={count}> //共享出去
<Child />
</CountContext.Provider>
</div>
)
}
function Child() {
// 接收
const count = useContext(CountContext)
return <h2>{count}</h2>
}
useReducer完成类似的Redux
useReducer可以让代码具有更好的可读性和可维护性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20function ReducerDemo(){
const [ count , dispatch ] =useReducer((state,action)=>{
switch(action){
case 'add':
return state+1
case 'sub':
return state-1
default:
return state
}
},0)
return (
<div>
<h2>现在的分数是{count}</h2>
<button onClick={()=>dispatch('add')}>Increment</button>
<button onClick={()=>dispatch('sub')}>Decrement</button>
</div>
)
}
待续
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
广告
阿里云活动云服务器低至1核-2G-1M,1年89元,3年229。
2核-4G-3M,2年469元,3年799。
2核-8G-5M,3年899元。
新老客户都有优惠 点击查看详情/购买
腾讯云现在活动
1核 2G 1M 88一年
2核 4G 5M 3年只要998。 点击查看详情/购买