react初体验

react hooks

什么是 reach hooks 呢？

hooks 钩子   作用： 为函数组件提升状态，生命周期等，原本class组件中才有的功能可以理解为通过hooks为函数组件钩如了class的特性

有哪些hooks函数呢？

useEffect ，useRef ，useState，useCallback，useMemo，useReducer，useContext，useLayoutEffect

如何让useEffect 支持 async await？

 useEffect 作为 Hooks 中一个很重要的 Hooks，可以让你在函数组件中执行副作操作。

（副作用理解：就是具有不确定性的操作，你可以理解为不纯，不纯就意味着带来副作用）

正经解释：在react 组件中执行数据获取，订阅 和手动修改DOM，我们统一把这些操作称为副作用

我们知道 effect function 应该返回一个销毁函数（return返回的 cleanup 函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错**。

既然 useEffect 的回调函数不能使用 async...await，那我直接在它内部使用。

做法一：创建一个异步函数（async...await 的方式），然后执行该函数。

useEffect(()=>{
const asyncFun =async () =>{
    setpass(await mokCheck());
};
asyncFun();

,[]);

做法二：也可以使用 IIFE，如下所示：

useEffect(()=>{
(async () =>{
 setPass(await mockCheck());
})();

},[])

react 中可以做哪些性能优化？

• 使用 shouldComponentUpdate，避免不需要的渲染，但是如果对于props 和state 做深比较，代价很大， 所以需要根据业务进行些取舍；在有子组件的情况下，为了避免子组件的重复渲染，可以通过父组件来判断子组件是否需要 PureRender。
• 将props设置为数组对象：每一次调用react组件都会创建新组件，就算传入的数组或对象的值没有改变，他们的引用地址也会发生变化。
• 将函数绑定移动到构造函数内：可以避免每次都绑定事件
• 使用immutable 不可变数据，在我们项目中使用引用数据类型时，为了避免对元素数据的影响，一般是建议使用