react hook

一：hook的定义

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

二：使用react hook的好处

1.使用类组件，相关逻辑的代码会被分割到不同生命周期函数中，比如订阅监听与解绑 ，需要在 componentDidMount 中注册监听，而却需要在componentWillUnMount中解绑。相关逻辑的代码被拆分到了不同的生命周期函数中，而毫无关联的代码又被放在同一个生命周期函数中(比如获取数据以及注册监听都会放到componentDidMount中)，使用hook可以很好的优化这一问题，可以将不同逻辑的代码分开，相同逻辑的代码放到一起。

2.使用hook可以简化开发者的工作，使用hook，开发者可以不用理解javaScript中的this ，也不同给函数绑定this。

三：hook 以及作用

1.useState

使用示例：

const [state, setState] = useState(initialState);

useState接受初始值或者 函数(返回初始值) ， 返回一个state以及更新state的函数

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列

setState(newState);

函数式更新

如果新的state需要通过先前的state计算得出，则传递给setState一个函数，该函数接受原来的state作为参数，返回新的state，下面的例子展示了setState的两种用法

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Resetbutton>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+button>
    
  );
}

如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

2.useEffect

使用示例：

// 相当于componentDidMount
useEffect(()=>{
  // ...
},[])
 
//相当于componentDidMount + componentDidUpdate
useEffect(()=>{
  ...
})
 
// 相当于componentWillUnmount
useEffect(()=>{
  ...
 
  return () => {
     
  }
},[])

3.useCallback 和useMemo

useCallback和useMemo都是做优化工作的

它们的不同点：

4.useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

使用示例：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the inputbutton>
    
  );
}