Skip to main content

介绍下常用的 hooks？

useState​

状态钩子：为函数组建提供内部状态

// 引入 useState
import React, { useState } from "react";

function App() {
  // 使用
  const [count, setCount] = useState(1);
  return (
    <div>
      <h2> useState </h2>
      <p>{count}</p>
      {/* 调用 setCount方法 */}
      <button onClick={() => setCount(count + 1)}> 加1 </button>
    </div>
  );
}

export default App;

useContext​

共享钩子：该钩子的作用是，在组件之间共享状态。可以解决 react 逐层通过 Porps 传递数据，它接受 React.createContext()的返回结果作为参数，使用 useContext 将不再需要 Provider 和 Consumer。

import React, { useContext } from "react";
import "./App.css";
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider ， Consumer}
function App() {
  //使用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={520}>
      <div>
        <ShowAn />
      </div>
    </numberContext.Provider>
  );
}

function ShowAn() {
  //使用Consumer从上下文获取value
  //调用useContext，传入从React.createContext获取的上下文对象。
  const value = useContext(numberContext);
  return (
    // <numberContext.Consumer>
    // {value=><div>the answer is {value}</div>}
    // </numberContext.Consumer>
    <div>the answer is {value}</div>
  );
}
export default App;

参考答案：https://www.jianshu.com/p/d39a3df09dd5

useEffect​

副作用钩子：它接收两个参数

  • 第一个是进行的异步操作，每一次 render 之后执行副作用和清除上一次副作用，该函数的返回值就是清除函数（在执行下一个 effect 之前，上一个 effect 就已被清除）

  • 第二个是数组，用来给出 Effect 的依赖项，如果第二个参数不传，那么就是没有说明自己有没有依赖，那就是每次 render 该函数组件都执行。

let [age,setAges] = useState(3)
useEffect(()=>{
  ...
  return ()=>{}//组件卸载时执行
},[])

useEffect 模拟类组件生命周期​

  • useEffect 第二个参数传个空数组，无依赖，只执行一次，相当于 componentDidMount
  • useEffect 不传第二个参数或者传递参数，相当于 componentDidUpdate
  • useEffect 第一个参数的返回值可以模仿 componentWillUnmount

useEffect 中 return 使用场景​

清除副作用：清除定时器

useRef​

获取组件的实例；渲染周期之间共享数据的存储(state 不能存储跨渲染周期的数据，因为 state 的保存会触发组件重渲染） useRef 传入一个参数 initValue，并创建一个对象{ current: initValue }给函数组件使用，在整个生命周期中该对象保持不变。

function App() {
  const refInput = React.useRef(null);
  React.useEffect(() => {
    refInput.current && refInput.current.focus();
  }, []);

  return <input ref={refInput} />;
}

自定义 Hook​

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性