react hook超实用的用法和技巧分析
react hook发布也已经有几个月了，相信有部分人已经开始使用了，还有些人在犹豫要不要用，可能更多人安于现状，没有要用的打算，甚至还有很多公司的react版本是15或以下的，迫于升级的难度没有使用。以我个人的观点，要不要使用react hook呢？
建议用的的人
- 项目react版本已经是react16了
- 新建的项目
- 一直对新技术保持关注，跃跃欲试的人
- 对函数式编程爱好的人
- 对react的componentDidMount，componentWillReceiverProps，componentDidUpdate厌烦，甚至因为重新渲染整天在头疼的人
不建议用的人
- 对react hook极其厌恶，对react生命周期编程是非爱好的人。
- 只要你想，没有不建议用的人，包括第一类人。
这只是我个人的建议，我现在用的周期也不长，我们的项目是react 16的，并且团队里只有我自己在写ract hook。幸好react hook和生命周期编程方式是完全兼容的。
那么其实react hook的特点和优点其实也显露出来了。
1. 没有了显性的生命周期，所有渲染后的执行方法都在useEffect里面统一管理
2. 函数式编程，你不需要定义constructor，render，定义class
3. 某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理
4. 肯定还有我没发掘的优点针对以上的特点优点我逐一说明，对于特别基础的用法我就不大篇长论了，建议参考官网的说明文档：react官网
1. 没有了显性的生命周期，所有渲染后的执行方法都在useEffect里面统一管理
上代码(伪)：
function getData(id) {
const [data, setData] = useState({});
useEffect(() => {
const data = api.getData(id);
setData(data);
}, [id]);
return <div>{data.name}</div>
}这是根据id获取数据显示name的组件。
因为这个id是外部传入的，在以前你需要再didMount，willReceiverProps里面去判断是否传入的和当前的不一样，然后去获取数据，但是这里就不用了。直接集成在useEffect里面。最关键的是第二个参数[id]。这个参数的意思是id变了才进入里面的方法执行，方然第一次必执行。当然我说的不全面，大致是这个意思，还有更复杂的场景，反正这种方式类似于监听id，id变了就执行，这不就是我们的最终目的吗？react以前分那么多周期其实就是处理这一件事情
2. 函数式编程，你不需要定义constructor，render，定义class
这个就不用多说了吧
function heihei() {
const [count, setCount] = useState(0);
return (
<div>
{count}
<button onClick={() => setCount(count + 1)}>增加count</button>
</div>
)
}no生命周期，no class，一切都是函数式编程
3. 某一个组件，方法需不需要渲染，重新执行完全取决于你，而且十分方便管理
这里主要讲两个方法，useMemo和useCallback
先看useCallback
之前如果我们在render中定义了一个方法：
render() {
const {data} = this.state;
const filter = data.filter(e => e.id !== 5);
...
}那么我们知道每次render都会执行filter这个方法，其实你是不是觉得当data没变这个方法只要执行一次就好了，看看react hook怎么做的
function demo() {
...
const filter = useCallback(() => {
data.filter(e => e.id !== 5)
}, [data])
...
}看懂了吗？这个完全就是我之前提出来的思路啊，它把这个方法执行的结果缓存起来了！！！后面的[data]就是当data不变，也不会多执行。
同样的道理，对于一个组件，用useMemo就好啦
const mainInfoMemo = useMemo(() => {
return MAIN_INFO.map(e => (
<div key={e.key}><b>{e.label}</b>：
{curSubject[e.key]}
</div>
));
}, [curSubject]);当curSubject不变，当你用这个组件的时候一直不会再次渲染。
来自：https://segmentfault.com/a/1190000019035606
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
