React Hook

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

Hook的使用规则

　　Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

　　1. 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

　　2. 只能在React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中。）

 

1. useState

    使函数组件具备了state,可以获取并修改指定state

　const [state,setState] = useState(initstate)

　- state 状态

   - setState 修改该状态的方法

      - setState useState 返回的setState ，不具备浅合并，需要手动合并（例如把其他的state解构进来）

   - initstate state 的初始值

function Example() {
  // 声明一个叫 "count" 的 state 变量 
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}


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

作用：

　　1. 关联节点实例

　　2. 用来记录组件更新前的一些数据（在useEffect的例子中用到）

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

3. useEffect
　　在函数组件中执行副作用操作




// 记录组件更新前的一些数据

  const isMount = useRef(true);

 

　// 执行的生命周期 componentDidMount componentWillUnmount

  useEffect(()=>{

      console.log("组件挂载完执行");

      return ()=>{

        console.log("组件即将卸载执行");

      }

  },[]);

 

　// componentDidMount componentDidUpdate

  useEffect(()=>{

    console.log("组件挂载完或更新完都执行");

  })

 

  // componentDidMount componentDidUpdate(nub更新)

  useEffect(()=>{

    console.log("组件挂载完或nub有变化引起的更新更新完都执行");

  },[nub]);

 

  // componentDidUpdate componentDidMount （组件第一次挂载完成执行，之后不执行）

  useEffect(()=>{

    if(!isMount.current){

      console.log("组件更新完成");

    } else {

      console.log("mounted");

      isMount.current = false;

    }

  })