搞懂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)   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 (
         <>
           

setName(new Date().getTime())}> name setContent(new Date().getTime())}> content {content} ) }

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

React Hooks ---useMemo_weixin_33739523的博客-CSDN博客
 

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 等手动优化，否则的话就会不知不觉的导致一些性能问题