Hooks 使用中的注意事项

几点注意事项

useState 初始化值，只有第一次有效

直接看代码

import { useState } from 'react';

// 子组件
function Child({ userInfo }) {
  // render: 初始化 state
  // re-render: 只恢复初始化的 state 值，不会再重新设置新的值
  // 只能用 setName 修改
  const [name, setName] = useState(userInfo.name);

  return (
    <div>
      <p>child, props name:{userInfo.name}</p>
      <p>child, state name:{name}</p>
    </div>
  );
}

function UseStateTrap() {
  const [name, setName] = useState('lzw');
  const userInfo = { name };

  return (
    <div>
      <div>
        parent &nbsp;
        <button onClick={() => setName('张三')}>setName</button>
      </div>
      ds
      <Child userInfo={userInfo} />
    </div>
  );
}

export default UseStateTrap;

初始值

child, props name:lzw
child, state name:lzw

点击 setName 后结果

child, props name:张三
child, state name:lzw

useEffect 内部不能修改 state

直接看代码

import { useEffect, useState } from 'react';

function UseEffectChangeState() {
  const [count, setCount] = useState(0);

  // 模拟 DidMount
  useEffect(() => {
    console.log('useEffect...', count);

    // 定时任务
    const timer = setInterval(() => {
      console.log('setInterval...', count);
      setCount(count + 1);
    }, 1000);

    // 清除定时任务
    return () => clearInterval(timer);
  }, []); // 依赖是 []

  // 依赖是 [] 时： re-render 不会重新执行 effect 函数
  // 没有依赖：re-render 会重新执行 effect 函数

  return <div>count: {count}</div>;
}

export default UseEffectChangeState;

控制台输出

useEffect... 0
setInterval... 0

解决办法

import { useEffect, useState, useRef } from 'react';

function UseEffectChangeState() {
  const [count, setCount] = useState(0);

  // 模拟 DidMount
  let countRef = useRef(0); //解决办法
  useEffect(() => {
    console.log('useEffect...', count);

    // 定时任务
    const timer = setInterval(() => {
      // console.log('setInterval...', count)
      // setCount(count + 1)
      //解决办法-----
      console.log('setInterval...', countRef.current);
      setCount(++countRef.current);
      //解决办法-----
    }, 1000);

    // 清除定时任务
    return () => clearInterval(timer);
  }, []); // 依赖是 []

  // 依赖是 [] 时： re-render 不会重新执行 effect 函数
  // 没有依赖：re-render 会重新执行 effect 函数

  return <div>count: {count}</div>;
}

export default UseEffectChangeState;

useEffect 可能出现死循环

死循环代码

import { useState, useEffect } from 'react';
import axios from 'axios';

// axios 返送网络请求
function useAxios(url, config = {}) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();
  const [error, setError] = useState();

  useEffect(
    () => {
      // 利用 axios 发送网络请求
      setLoading(true);
      axios
        .get(url) // 发送一个 get 请求
        .then((res) => setData(res))
        .catch((err) => setError(err))
        .finally(() => setLoading(false));
    },
    [url], // 只能使用值类型：a,b,c 这种，然后拼接成 const config = {a,b,c}
    //[url,config] // 如果使用 config 对象，就回出现死循环
    // 根本原因是 React 使用 Object.is 判断 依赖 是否变化
    // Object.is(1,1)  // true
    // Object.is('a','a') // true
    // Object.is({},{}) // false
    // Object.is([],[]) // false
  );

  return [loading, data, error];
}

export default useAxios;