React Hooks 速查表

不久前，我开始使用函数式组件，而不是基于类的组件。主要目标是学习如何在函数式组件中实现 React Hooks。这样我们可以编写更少的代码，并提高代码的可复用性。

使用钩子和功能组件的好处是可重用性、更简单和更短的代码以及测试这些组件的简单性。

通常的类方法如今已成为过去。在这里，我将分享一份简短易懂的 React Hooks 速查表。这不是 Hooks 的教程，因为网上有很多文章，而且文档也非常完善。这可以为已经熟悉 Hooks 编写的读者提供快速参考。如果您是 Hooks 新手，仍然可以查看一下。好了，让我们开始吧。

UseState - 类似于 React state 和 setState

具有原始值

const App = () => {
    const [carSpeed, updateCarSpeed] = useState(10);
    return (
        <div>
            <p>Car is going {carSpeed} km/h</p>
            <button onClick={() => updateCarSpeed(carSpeed + 5)}>
                Speed up
            </button>
        </div>
    );
};

与对象

export const App = () => {
    const [carForm, updateForm] = useState({});
    const updateField = (e) => {
        updateForm({ ...carForm, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(carForm);
    };
    return (
        <form onSubmit={handleSubmit}>
            <label>
                Car Owner:
                <input
                    value={carForm.owner}
                    name="owner"
                    onChange={updateField}
                />
            </label>
            <br />
            <label>
                Car model:
                <input
                    value={carForm.model}
                    name="model"
                    onChange={updateField}
                />
            </label>
            <button>Submit</button>
        </form>
    );
};

UseEffect - 类似于 componentDidUpdate

仅触发一次（因为数组参数为空）

export const App = () => {
    const [carsData, updateCars] = useState({});

    useEffect(() => {
        fetch("http://example.com/cars.json")
            .then((resp) => resp.json())
            .then((data) => {
                updateCars(data);
            });
    }, []);

    const renderCars = () => {
        return carsData.cars.map((car) => {
            <p key={car.id}>{car.name}</p>;
        });
    };

    return <div>{renderCars()}</div>;
};

在 carName 变量改变时触发

export const App = () => {
    const [carName, updateCarName] = useState("");

    useEffect(() => {
        console.log("changed");
    }, [carName]);

    return (
        <div>
            <input
                value={carName}
                onChange={(e) => updateCarName(e.target.value)}
            />
        </div>
    );
};

使用 React.memo HOC 和 useCallback 的 UseReducer

此示例使用了useReducer hook，其作用类似于 Redux。它包含一个 Reducer 和一些用于更改 Reducer 中状态的操作。我们还使用了React.memo和 useCallback，其唯一目的是避免在检查每辆汽车是否已售出时重新渲染新的“Car”组件。
UseCallback - 当你的组件中有一个频繁重新渲染的子组件，并且需要向其传递回调函数时，可以使用此钩子。如果没有它，每次将新汽车添加到列表中时，addCar 函数都会重新实例化。


// initial cars state
const initialState = [
  {
    id: id(),
    name: "Audi A4",
    description: 'Black tint with red wheels, 100kw',
    sold: false
  },
  {
    id: id(),
    name: "Porsche 911",
    description: 'Cherry red tint with dark golden wheels, 300kw',
    sold: false
  },
  {
    id: id(),
    name: "Lamborghini Gallardo",
    description: 'Lamborghini green with black wheels, 500kw',
    sold: false
  },
];


// action names
const CAR_ADD = 'CAR_ADD';
const CAR_SELL = 'CAR_SELL';

// the reducer
const reducer = (state, action) => {
  if (action.type === CAR_ADD) {
    return [action.payload, ...state];
  }

  if (action.type === CAR_SELL) {
    return state.map(car => {
      if (car.id !== action.payload.id) {
        return car;
      }
      return { ...car, sold: !car.sold };
    });
  }

  return state;
};

const App = () => {
  const [cars, dispatch] = useReducer(reducer, initialState);

  const addCar = useCallback(({ name, description }) => {
    dispatch(
      {
        type: CAR_ADD,
        payload: {
          name,
          description,
          sold: false,
          id: id()
        }
      },
      [dispatch]
    );
  });

  const toggleSold = useCallback(
    id => {
      dispatch({
        type: CAR_SELL,
        payload: {
          id
        }
      });
    },
    [dispatch]
  );

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <NewCarForm onSubmit={addCar} />
      <Cars cars={cars} onSell={toggleSold} />
    </div>
  );
};

const Cars = ({ cars = [], onSell }) => {
  return (
    <div>
      <h2>Cars ({cars.length})</h2>
      {cars.map(car => (
        <Car key={car.id} car={car} onSell={onSell} />
      ))}
    </div>
  );
};

const Car = React.memo(({ car, onSell }) => {
  return (
    <div style={{border:"1px solid", margin: 10, padding: 10}}>
      <h3>{car.name}</h3>
      <p>{car.description}</p>
      <div>
        <label>
          <input
            type="checkbox"
            checked={car.sold}
            onChange={() => onSell(car.id)}
          />
          Sold
        </label>
      </div>
    </div>
  );
});

const NewCarForm = React.memo(({ onSubmit }) => {
  const [name, setCarName] = useState('');
  const [description, setCarDescription] = useState('');

  const handleChange = e => {
    e.preventDefault();
    onSubmit({ name, description });
  };

  return (
    <form onSubmit={handleChange}>
      <input
        placeholder="Car name"
        type="text"
        value={name}
        onChange={event => setCarName(event.target.value)}
      />
      <input
        placeholder="Car description"
        type="text"
        value={description}
        onChange={event => setCarDescription(event.target.value)}
      />
      <input type="submit" />
    </form>
  );
});

就这些了，感谢你阅读这篇好心的陌生人的文章。你还有什么想添加到列表中的吗？告诉我。

文章来源：https://dev.to/bornfightcompany/react-hooks-cheat-sheet-3kl9