React hook 相关内容

一、useReducer 与 useState

useReducer 可以传给子组件个 dispatch 函数，子组件可以通过传递不同的 action，来达到不一样的处理（比如加 1 或 减 1），而用 useState 就要定义多个并且传递多个

二、为什么 useState 返回的是个数组，而不是对象

因为数组只是定义了个顺序，组件方要使用什么名字都可以;

对象则定义死了 key，并且无法在一个组件里填写多个，因为一个组件的 state 命名要唯一

三、副作用

只要不是将数据转成视图，像是 ajax 请求，为 dom 元素添加事件，设置定时器

四、为什么要使用 HOOK

1. 类组件缺少逻辑复用机制

   包裹类组件，增加了组件层级，增加了调试的难度以及运行效率

2. 类组件经常会变得很复杂很难以维护
   • 将一组相干的业务逻辑拆分到了多个生命周期函数中，比如创建与销毁写在不同的生命周期
   • 在一个生命周期函数内存在多个不相干的业务逻辑，比如又是 ajax 请求，又要设置标题
3. 类成员方法不能保证this 指向的正确性

五、useState 闭包

• 用于为函数组件引入状态
• 参数除了是任意数据类型外，也可以是个函数，用于初始值是动态值的情况
• 函数只会被调用一次，相当于只会在组件初次渲染时执行，而在组件更新时并不会执行， 用于初始值是由外部传入的场景

const [count,setCount] = useState(() => {
    return props.count || 0
})
           

• 如果在函数体里写成如下，那么组件更新时，count 的值又会被设置为初始值，更新失效

const countNum = props.count || 0
const [count,setCount] = useState(countNum)
           

• 设置状态值的方法可以是一个值也可以是个函数，是异步的

setCount(count => {
    return count + 1
})
           

六、useReducer

比起 useState，减少传递函数给子组件，通过参数的值来做不同的效果，而不像 useState 的 更改做的事情比较单一

不需要传递多个修改数据的方法，比如数值加1，或减1，而是直接将 dispatch(useReducer 的第二个参数)传给子组件，子组件传递不同的 action 来触发

七、useContext

在跨组件层级获取数据时简化获取数据的代码

相当于将 countContext.consumer 简化成 useContext(countContext)

八、useEffect

第二个参数，不传时任何数据发生改变都会触发回调函数，

传递数组时，表示指定数据发生变化时才会触发回调函数

useEffect(() => {
    document.title = count
},[count])
           

useEffect 的参数函数不能是异步函数，因为 useEffect 要返回清理资源的函数，如果是异步函数就变成了返回 promise，可以改成自执行函数来解决

useEffect(() => {
    (async () => {
        await axios.get()
    })()
})
           

九、useMemo

监测某个值的变化，根据变化值计算新值

会缓存计算结果 ，如果监测值没有发生变化，即使组件重新渲染，也不会重新计算。此行为可以有助于避免在每个渲染上进行昂贵的计算

const result = useMemo(() => {
    return count
},[count])
           

十、memo

性能优化，如果本组件中的数据没有发生变化，阻止组件更新，类似于类组件中的 PureCompoent 与 shouldComponentUpdate,但 memo 默认只能监听 props 更改

function Counter() {
    return <div>11</div>
}
export default memo(Counter)
           

十一、useCallback

性能优化，缓存函数，使组件重新渲染时得到相同的函数实例

父子组件

十二、useRef

获取 DOM 元素对象，对象会有个 current 属性指向 DOM 元素

const userName = useRef()
return <div ref={userName}></div>
           

保存数据(跨组件周期)

即使组件重新渲染，保存的数据仍然还在，

保存的数据被更改不会触发组件重新渲染

用处：

1. 在 useEffect 区别 didMount 还是 didUpdate 时，
2. 成员列表下拉加载更多时，
3. 用于存储 pageNo 定时器

十三、自定义 Hook

• 标准的封装和共享逻辑的方式 是个函数，
• 其名称是以 use 开头

• 其实就是逻辑和内置 Hook 的组合

  共享逻辑：有共同的业务逻辑，比如两个组件都有获取文章的需求，那么就可以将获取文章抽成自定义 hook

十四、路由 Hook

useHistory useLocation useRouteMatch useParams（路由参数）

// props 输出的对象，有以下属性
history
location
match
           

十五、手写 useState

let state = [];
let setters = [];
let stateIndex = 0;

function createSetter (index) {
  return function (newState) {
    state[index] = newState;
    render ();
  }
}

function useState (initialState) {
  state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState;
  setters.push(createSetter(stateIndex));
  let value = state[stateIndex];
  let setter = setters[stateIndex];
  stateIndex++;
  return [value, setter];
}

function render () {
  stateIndex = 0;
  effectIndex = 0;
  ReactDOM.render(<App />, document.getElementById('root'));
}
           

十六、useEffect

// 上一次的依赖值
let prevDepsAry = [];
let effectIndex = 0;

function useEffect(callback, depsAry) {
  // 判断callback是不是函数
  if (Object.prototype.toString.call(callback) !== '[object Function]') throw new Error('useEffect函数的第一个参数必须是函数');
  // 判断depsAry有没有被传递
  if (typeof depsAry === 'undefined') {
    // 没有传递
    callback();
  } else {
    // 判断depsAry是不是数组
    if (Object.prototype.toString.call(depsAry) !== '[object Array]') throw new Error('useEffect函数的第二个参数必须是数组');
    // 获取上一次的状态值
    let prevDeps = prevDepsAry[effectIndex];
    // 将当前的依赖值和上一次的依赖值做对比 如果有变化 调用callback
    let hasChanged = prevDeps ? depsAry.every((dep, index) => dep === prevDeps[index]) === false : true;
    // 判断值是否有变化
    if (hasChanged) {
      callback();
    }
    // 同步依赖值
    prevDepsAry[effectIndex] = depsAry;
    effectIndex++;
  }
}
           

十七、useReducer

function useReducer (reducer, initialState) {
  const [state, setState] = useState(initialState);
  function dispatch (action) {
    const newState = reducer(state, action);
    setState(newState);
  }
  return [state, dispatch];
}
           

相关链接

react Hook 之 memo，useCallback，useMemo 性能优化

useRef详细总结