zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    25. Spring Boot与缓存 JSR-107、Spring缓存抽象
    24. Spring Boot 自定义Starter (未整理,待续)
    UGUI 锚点
    UGUI Button控件
    UGUI Image控件
    UGUI Text控件
    Unity 角色复活和重新开始游戏
    Unity 读取Excel
    IOS使用C#预处理命令,多种SDK共存
    Unity扩展 四种Menu的区别
  • 原文地址:https://www.cnblogs.com/develon/p/14267480.html
Copyright © 2011-2022 走看看