useState

useState 使我们的函数式组件可以拥有 state，当 state 更新时，React 会 rerender， 使得我们更新后的 state 值应用于新的视图。

传递函数到 setState

const [state, setState] = useState();

setState 能够接收一个函数作为参数，传递的函数第一个参数使我们可以访问上次的 state 值。

代码示例 1

function SomeComponent() {
    const [value, setValue] = useState(0);

    function handleClick1() {
        // 实际上等于 0 + 1
        setValue(value + 1);
        // 这里也是等于 0 + 1
        setValue(value + 1);
    }

    function handleClick2() {
        // 0 + 1
        setValue((prev) => prev + 1);
        // 1 + 1
        setValue((prev) => prev + 1);
    }

    return <button onClick={handleClick2}>{value}</button>
}

使用规范

1. 能够通过组件中现有的 props 和 state 计算而来的值，就无需创建一个新的 state

代码示例 2

function SomeComponent() {
    const [value, setValue] = useState<number>(0);
    return <div>{ value * 2}</div>
}

2. 不直接向子组件传递 useState 返回的第二个参数

我们可以封装为一个函数后传递给子组件，便于插入额外的逻辑，而不是被迫通过 useEffect 去监听 state 的改变。

代码示例 3

function SomeComponent() {
    const [modalVisible, setModalVisible] = useState<boolean>(false);
    function closeModal() {
        // 更新前插入自定义逻辑
        setModalVisible(false);
        // 更新后插入自定义逻辑
    }
    return <div><SubComponent closeModal={closeModal} /></div>
}

3. 推荐使用状态提升，将 state 交由父组件，再由父组件向下传递 state

单向数据流使得我们的应用程序变得更容易维护