React Hooks

useState

使用方法

• const [n,setN] =React.useState(0)
• const [user,setUser] = useState({name:'Frank', age: 18})

注意事项

1. useState不会合并属性，不可局部更新。

function App() {
   const [user,setUser] = useState({name:'Frank', age: 18})
   const onClick = ()=>{
      setUser({
      ...user,//不加这一句不会合并age
      name: 'Jack'
 })}
   return (
      <div className="App">
        <h1>{user.name}</h1>
        <h2>{user.age}</h2>
        <button onClick={onClick}>Click</button>
        </div>
   )}

2. setState(obj)如果obj地址不变，那么React就认为数据没有变化

setState接受函数

优先使用函数方法： setN(i => i+1)

useReducer

用来践行Flux/Redux 的思想

1. 创建初始值 initialState
2. 创建所有操作的reducer(state,action)
3. 传给useReducer，得到读和写的API
4. 调用写({type:'操作类型'})
5. 示例代码

• 一个用useReducer的表单例子

如何代替Redux

1. 将数据集中在一个store对象
2. 将所有操作集中在reducer
3. 创建一个Context
4. 创建对数据的读写API
5. 将第四步的内容放到第三步的Context
6. 用Context.Provider将Context提供给所有组件
7. 各个组件用useContext 获取读写API

例子

useReducer

• 全局变量是全局的上下文
• 上下文是局部的全局变量
• 使用方法：

1. 使用C= createContext(initial)创建上下文
2. 使用<C.Provider>圈定作用域
3. 在作用域内使用useContext(C)来使用上下文

useMemo

• 使用React.memo可以使不更新的组件不render,示例
• 但是添加监听函数后依旧执行，所以需要使用useMemo,代码

特点

1. 第一个参数是()=>value
2. 第二个参数是依赖[m,n]
3. 只有当依赖变化时，才会计算出新的value
4. 如果依赖不变，那么就会重用之前的value

• 注意：如果你的value是个函数，那么你就要写成useMemo(()=>(x) => console.log(x))，这时也可以用useCallback
• useCallback(x => console.log(x))等价于useMemo(()=>(x) => console.log(x))

useRef

1. 如果你需要一个值，在组件不断render时保持不变
2. 初始化：const count = useRef(0)
3. 读取：count.current

• 可以引用DOM对象
• 也可以用来引用普通对象

forwardRef

由于props不包含ref,所以需要forwardRef，示例

useImperativeHandle

• useImperativeHandle实际就是setRef（自定义Ref）
• 不用useImperativeHandle的代码
• 用了useImperativeHandle的代码

自定义Hook

• 简单例子
• 贴心例子
• 你还可以再自定义Hook里使用Context
• useState只说了不能在if里，没说不能在函数里运行，只要这个函数在函数组件里运行即可