共计 2833 个字符，预计需要花费 8 分钟才能阅读完成。
什么是 Hooks？Hooks 是 react 即将推出的功能，它允许您在不编写类的情况下使用状态和其他 React 功能。我的理解就是可以用写无状态组件的方式去编写拥有状态的组件。遗憾的是，正式版 16.7.0 出了之后并没有 hooks，如果需要体验还需下载 next 版本，目前是 16.7.0-alpha.2
npm i react@next
这次与大家分享五个 Hooks，个人觉得这几个应该是之后工作中会经常使用到的。
1. useState
2. useEffect
3. useReducer
4. useMemo
1.useState 个人感觉这个钩子是重点，使用它即可做到用函数的编写带有状态的组件。
import React,{useState，useEffect} from ‘react’
const HookTest = () => {
const [obj,setValue] = useState({key:’count’,value:0});
const handleChange = () => {
const value = obj.value+1;
// 改变状态
setValue(Object.assign(obj,{value}));
}
return (
<div>
{obj.key}:{obj.value}
<p>
<button onClick={handleChange}> 累加 </button>
</p>
</div>
)
}
很明显，重点在于 const [obj,setValue] = useState({key:’count’,value:0}) 这一句，useState 是个函数，接收一个状默认值，返回一个数组，第一个元素为状态，初始值为传入函数的默认值，第二个元素为方法，可使用此方法改变状态的值。
2.useEffect 这个钩子，官方所说是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期的结合，因为组件挂载完成时会执行，更新时会执行，卸载时会执行，接上面的 HookTest 组件，往里添加
useEffect(()=>{
console.log(‘obj->’,obj);
return ()=>{
console.log(‘ 卸载时..’);
}
});
这就是一个基本用法，挂载、更新、卸载都会打印 obj 对象，return 的函数，作为组件更新或者卸载时执行，比如在使用 setinterval, 可以在 return 的函数里写 clearinterval。如果只想让它执行一次的话，可以往函数里添加第二个参数。
useEffect(()=>{
console.log(‘obj->’,obj);
},false);
这样只在挂载完成时执行一次，第二个参数可以为 false、[]、{}、”” 如果想让他有条件的执行，可以往第二个参数传入具体的参数
useEffect(()=>{
console.log(‘obj->’,obj);
},{obj.value});
如果 obj.value 值变化时，就执行，没变化时就不执行，对于性能优化非常友好。
3.useReducer
如果使用过 redux 的童鞋们不会默认，将需要的状态保存到一个对象中，可供所有的组件使用。先上代码
import React, {useReducer,useMemo} from ‘react’;
// 创建 reducer，reducer 可在外部创建然后再引入
function reducer(state = { count: 0}, action) {
switch (action.type) {
case ‘reset’:
return {count: 0};
case ‘increment’:
return {count: state.count + 1};
case ‘decrement’:
return {count: state.count <= 0 ? 0 : state.count – 1};
default:
return state;
}
}
// 组件
const useReducerDemo = () => {
const [state, dispatch] = useReducer(reducer, { count: 0}, {type: ‘increment’});
// 异步增加
const asyncIncrement = () => {
setTimeout(()=>{
dispatch({type: ‘increment’})
},2000);
}
return (
<div>
<p>
<span>Count: {state.count}</span>
<button onClick={() => dispatch({ type: ‘reset’})}> 还原 </button>
<button onClick={() => dispatch({ type: ‘increment’})}>+</button>
<button onClick={() => dispatch({ type: ‘decrement’})}>-</button>
<button onClick={asyncIncrement}>async+</button>
</p>
</div>
)
}
可以看到，和 useState 很像，也是使用一个数组解构接受返回的值。先说返回的值：1.state 自然为 reducer 的状态 2.dispatch 这个是一个函数，有 dispatch 就意味着我们可以不用像使用 redux 时还需要自己下中间件（如 redux-thunk）就可以进行异步操作，具体看 asyncIncrement 函数, 参数为一个对象，指定需要执行的 action 再说 useReducer 函数的参数：第一个参数为你引入的 reducer，第二个参数为 state 的默认值，第三个参数为初始触发的 action，就是载入时默认就执行一个 action
4.useMemouseMemo 只有当其中一个输入发生变化时，才会重新计算记忆值。此优化有助于避免在每个渲染上进行昂贵的计算。此钩子也是有助于性能优化，接入上面的 useReducerDemo 组件，往里添加
const memoizedValue = useMemo(() => {
console.log(‘useMemo run’);
return ` 改变了 ${tips}`
}, [tips]);
在 return 组件元素 div 里添加
<p>{memoizedValue}</p>
useMemo 同样也是一个函数，接受两个参数，第一个参数为函数，第二个参数为要比对的值，返回一个值。第二个参数里可以传入多个值，如 [a,b,c,…]，当传入的这些值有变化时，就会去执行第一个传入的函数，根据业务需求计算后返回最终结果。同理，第二个参数传入的值没有更新时，不会执行。
结尾花了一下午的时间体验 hook，其他的钩子也使用了个遍，感觉这四个在我看来和在我公司业务里可能会大量的使用到，所以发此文章分享，也为记录，本人新手前端一枚，写错的话请多多指教。谢谢大家的阅读。以上代码的 github 地址为 react-hooks 初体验