react（十一）常用的hooks—useState、useEffect、useRef

hooks

React hooks(钩子)

• hooks 是

  React 16.8

  中的新增功能。它们使得无需编写类即可使用状态和其他React功能.

React Hooks 优势

• 简化组件逻辑；
• 复用状态逻辑；
• 无需使用类组件编写。

Hook 使用规则

• 只能在 React 函数中调用 hooks；
• 只能在外层使用 hooks。

useState

let [状态,修改该状态的方法] = useState(初始值);

• 在同一个组件中可以使用 useState 定义多个状态
• 注意 useState 返回的 setState 方法，不会进行对象合并
• 注意 useState 返回的 setState 方法同样是异步方法

function Child() {
  //let [count,setCount] = useState(1);
  let [state, setState] = useState({
    count: 1
  });
  let { count } = state;
  return <div>
    <p>{count}</p>
    <button onClick={() => {
      setState({
        count: count + 1
      })
    }}>递增</button>
  </div>;
}
           

特别注意：使用useState 返回的 setState 方法，不会进行对象合并

function Child() {
  let [state,setState] = useState({
    name:"xiaochen",
    count: 1
  }); 
  let {name,count} = state;
  console.log("render");
  return <div>
      <input 
        type="text" 
        value={name}
        onChange={({target})=>{
          setState({
            ...state,  //由于不会进行对象合并
            name:target.value
          })
        }}
      />
      <p>{name}</p>
      <p>{count}</p>
      <button onClick={()=>{
          setState({
            ...state,  //由于不会进行对象合并
            count:count+1
          })
          console.log("修改")
      }}>递增</button>
  </div>;
}
           

useEffect

useEffect(()=>{
  //副作用函数
  return ()=>{
    // 副作用函数的返还函数
  }
},[依赖参数])
           

• 依赖参数:
  • 当不写依赖参数时，只要组件更新就会执行副作用函数；
  • 当依赖参数为[ ]时，副作用函数只在挂载完之后执行；
  • 写依赖参数，当监听参数修改时，或组件挂载时执行副作用函数。

useEffect(()=>{
   console.log('组件挂载时、count修改时就会执行执行');
 },[count]);
useEffect(()=>{
    console.log("挂载完成之后执行")
},[]);
useEffect(()=>{
    console.log("组件更新就会执行")
});
           

• 类组件

  • componentDidMount、componentDidUpdate 和 componentWillUnmount

• 需要清除的副作用
  • 副作用：DOM 操作、异步
• 执行顺序：
  • 挂载阶段：
    • render --> 副作用函数
  • 更新阶段:
    • render --> 返回函数(即将更新) --> 完成更新(副作用函数)
  • 卸载阶段:
    • 返回函数(即将卸载)

useRef

• 用户关联原生DOM节点，或者用来记录组件更新前的一些数据

• useRef

  存储的是数据，而非获取

  DOM

  或组件实例；
• 源数据改变，

  ref

  中存储的数据并不会随之改变，需要手动改变；
• 通过

  ref

  的该特性就可以夸组件的更新阶段传递信息。换句话说，我们可以通过

  ref

  来获取组件更新前的信息。

function Child() {
  const [count,setCount] = useState(1);
  const [val,setVal] = useState("");
  const div = useRef();
  const update = useRef(count);
  useEffect(()=>{
    console.log(div.current);
    console.log(update.current,count);
    // 需要手动改变
    update.current = count;
  })
  return <div ref={div}>
      <input type="text" onChange={({target})=>{
        setVal(target.value)
      }}></input>
      <p>{val}</p>
      <p>{count}</p>
      <button onClick={()=>{
        setCount(count + 1);
      }}>递增</button>
  </div>;
}