react hooks 学习. FAQ

useState代替state

1
2
3
4
5
6
7
8
9
function Example(){
const [ count , setCount ] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
</div>
)
}

useEffect代替常用生命周期函数

实现类似componentWillUnmount的效果,useEffect的第二个参数,它是一个数组,数组中可以写入很多状态对应的变量,意思是当状态值发生变化时,我们才进行解绑。但是当传空数组[]时,就是当组件将被销毁时才进行解绑,这也就实现了componentWillUnmount的生命周期函数

1
2
3
4
5
6
useEffect(()=>{
// 初始化,更新时
return ()=>{
// 类似于销毁时
}
},[]) // [] 状态发生变化,在达到条件时才触发

useContext 让父子组件传值更简单

useContext跨越组件层级直接传递变量,实现共享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const 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
20
function 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。 点击查看详情/购买