1 分钟了解 react hook

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

useState 基础用法

const Index = () => {
  // useState() 方法里面唯一的参数就是初始 state
  // 返回值为:当前 state 以及更新 state 的函数
  let [count, setCount] = useState(0);

  return (
    <>
      
count: {count}
); };

useEffect 基础用法

const Index = () => {
  let [count, setCount] = useState(0);

  // React 保证了每次运行 effect 的同时,DOM 都已经更新完毕
  useEffect(() => {
    console.log("组件初次渲染");
    return () => console.log("组件被销毁");
  }, []);

  useEffect(() => {
    console.log("组件渲染");
  });

  useEffect(() => {
    console.log("监听到 count 发生了改变,新的值为 " + count);
  }, [count]); // 仅在 count 更改时更新

  return (
    <>
      
count: {count}
); };

props 父组件向子组件传递数据

const Father = () => {
  let [count, setCount] = useState(0);

  return (
    <>
      
      
    
  );
};

const Son = (props) => {
  return (
    <>
      
count: {props.count}
); };

父组件获取子组件数据

const Father = () => {
  // useRef常见的用例便是命令式地访问子组件
  const sonRef = useRef();

  return (
    <>
      
      
    
  );
};

const Son = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    // useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
    // useImperativeHandle 应当与 forwardRef 一起使用
    count,
    setCount,
  }));

  return (
    <>
      
count: {count}
); });

useContext 跨组件数据传递

const Context = createContext(0);

const Father = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      
        
      
      
    
  );
};

const Son = () => {
  // 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值
  const context = useContext(Context);
  return (
    <>
      
count: {context}
); };

参考链接:

完整示例
react 教程

你可能感兴趣的:(1 分钟了解 react hook)