搞懂React Hooks之 useState, useCallback, useEffect, useRef ，useMemo和useEffect

React Hooks 是React 在 v16.8 的版本中推出的新特性， 允许我们在不使用 Class 的前提下使用 state 和其他特性。

REACT两种组件：有状态组件（Class）无状态组件（Function）

UI组件: 只负责渲染页面，没有逻辑功能  我们可以使用函数无状态组件来展示UI

容器组件：负责处理业务逻辑，获取数据，处理数据，传递数据，向UI组件传递参数进行渲染。通常以类组件来实现

无状态组件：就是一个函数，一般来讲，React中函数式编程的效率远远高于class类编程。类的那种定义方式，花费更高代价执行一些生命周期函数。一个类组件的性能远远不及无状态组件

Hooks解决什么问题：

this的指向问题: 忘了绑定this，各种bug频发    this.handleClick = this.handleClick.bind(this)   <button onClick={() => this.handleClick(e)}>

不同的生命周期函数中反复写同一块功能的代码逻辑，不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，代码可读性更强，方便阅读维护 组件树层级变浅，原本 HOC/render props 方式来复用组件状态增强功能等，增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现

React Hooks 解决的问题是状态共享 是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案 不会产生 JSX 嵌套地狱问题。

1. useMemo
   useMemo(fn, arr) 主要用来解决使用React hooks产生的无用渲染的性能问题，我们可以使用useMemo方法，避免无用方法的调用。

   //父组件
   function App() {
     const [name, setName] = useState('名称')
     const [content,setContent] = useState('内容')
     return (
         <>
           <button onClick={() => setName(new Date().getTime())}>
               name
           </button>
           <button onClick={() => setContent(new Date().getTime())}>
               content
           </button>
           <Button name={name}>{content}</Button>
         </>
     )
   }

   //子组件
   function Button({ name, children }) {
     function changeName(name) {
       console.log('11')
       return name + '改变name的方法'
     }
    
     const otherName =  useMemo(()=>changeName(name),[name])
     return (
         <>
           <div>{otherName}</div>
           <div>{children}</div>
         </>
    
     )
   }
    
   export default Button

   React Hooks ---useMemo_weixin_33739523的博客-CSDN博客
    
2. useCallback
   useCallback()使用场景是：有一个父组件包含子组件，子组件接收一个函数作为props；如果父组件更新了子组件也会执行更新，这种更新不一定是必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。

   const onFormChange = useCallback(
       (key: string, value: string) => {
         setFormData({
           ...formData,
           [key]: value,
         });
       },
       [formData]
   )

useState, useCallback, useEffect, useRef   useCallback, useEffect, useRef, useState 区别及用法_MAMAsomers的博客-CSDN博客_useref和usestate区别

useMemo和useEffect   https://www.jianshu.com/p/94ace269414d

React Hooks

React Hooks_大灰狼的小绵羊哥哥的博客-CSDN博客_reacthooks

React Hooks 存在的一些问题 

• Hooks 执行原理和原生JS的心智模型的差异：因为 React Hooks 是通过把组件的代码每一次更新都进行重复调用来模拟一些行为，从而导致反直觉的一些限制；

• 不可以条件式的调用 React force ；

• Stale Closure 的心智负担：如果你不传正确的依赖数组，那么就会产生过期闭包；

• 必须手动声明 use Effect 依赖；

• 如何‘正确’使用 use Effect 是个复杂的问题；

• 需要 useMemo/useCallback 等手动优化，否则的话就会不知不觉的导致一些性能问题