React Hooks 之 useState

函数定义

   /**
     * Returns a stateful value, and a function to update it.
     * 返回一个有状态值，以及一个更新它的函数。
     * 
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#usestate
     */
    function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

    // convenience overload when first argument is omitted
    // 省略第一个参数时的便利重载
    function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

useState用法

import './index.html';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

var FC: React.FC<{ arr: string[] }> = (props, ctx) => {
    var [array, setArray] = React.useState(props.arr); // 只被初始化一次，后续渲染返回之前的数据，因此具有状态性
    return (
        <div>
            {array.map(it => <h1 style={{ color: 'red' }}>{it}</h1>)} // 数据映射到视图
        </div>
    );
};

ReactDOM.render(<div>
    <FC arr={['Java', 'C++', 'Node.js']}></FC>
</div>, /* container */ document.querySelector('#app'));

diff算法

State比较引用，因此修改对象属性后setState不会引起渲染。

var [array, setArray] = React.useState([1, 2, 3]);

array[0] = 0;
setArray(array); // X

setArray([...array]); // O

END