React Hook

useState

useState 弥补函数组件没有 state 的缺陷，函数组件通过 useState 可以让组件重新渲染，更新视图。

useState 基础介绍

const [ state , dispatch ] = useState(initData)

• state：目的提供给 UI ，作为渲染视图的数据源。
• dispatchAction：改变 state 的函数，可以理解为推动函数组件渲染的渲染函数。
• initData：有两种情况，第一种情况是非函数，将作为 state 初始化的值。 第二种情况是函数，函数的返回值作为 useState 初始化的值。

useState 基础用法

const DemoState = ( props ) => {
   /* number为此时state读取值 ，setNumber为派发更新的函数 */
   let [number, setNumber] = useState(0) /* 0为初始值 */
   return (
       <div>
           <span>{ number }</span>
           <button onClick={ ()=> {
             setNumber(number+1)
             console.log(number) /* 这里的number是不能够即使改变的  */
           } } ></button>
       </div>
   )
}

useState 注意事项

• 在函数组件一次执行上下文中，state 值是固定不变的。

function Index(){
    const [ number, setNumber ] = React.useState(0)
    const handleClick = () => setInterval(()=>{
        // 此时 number 一直都是 0
        setNumber(number + 1 ) 
    },1000)
    return <button onClick={ handleClick } > 点击 { number }</button>
}

• 如果两次 dispatchAction 传入相同的 state 值，那么组件就不会更新。

export default function Index(){
    const [ state  , dispatchState ] = useState({ name:'alien' })
    const  handleClick = ()=>{ // 点击按钮，视图没有更新。
        state.name = 'Alien'
        dispatchState(state) // 直接改变 `state`，在内存中指向的地址相同。
    }
    return <div>
         <span> { state.name }</span>
        <button onClick={ handleClick }  >changeName++</button>
    </div>
}

• 当触发 dispatchAction 在当前执行上下文中获取不到最新的 state, 只有再下一次组件 rerender 中才能获取到。

useMemo

const cacheSomething = useMemo(create,deps)

• create：第一个参数为一个函数，函数的返回值作为缓存值，如上 demo 中把 Children 对应的 element 对象，缓存起来。
• deps： 第二个参数为一个数组，存放当前 useMemo 的依赖项，在函数组件下一次执行的时候，会对比 deps 依赖项里面的状态，是否有改变，如果有改变重新执行 create ，得到新的缓存值。
• cacheSomething：返回值，执行 create 的返回值。如果 deps 中有依赖项改变，返回的重新执行 create 产生的值，否则取上一次缓存值。

useMemo原理：useMemo 会记录上一次执行 create 的返回值，并把它绑定在函数组件对应的 fiber 对象上，只要组件不销毁，缓存值就一直存在，但是 deps 中如果有一项改变，就会重新执行 create ，返回值作为新的值记录到 fiber 对象上。

useMemo应用场景：

• 可以缓存 element 对象，从而达到按条件渲染组件，优化性能的作用。
• 如果组件中不期望每次 render 都重新计算一些值,可以利用 useMemo 把它缓存起来。
• 可以把函数和属性缓存起来，作为 PureComponent 的绑定方法，或者配合其他Hooks一起使用。