React-本地状态(state)

  • Z时代
  • 2024-01-10
  • 分类：综合

react

　　在类组件中添加本地状态(state)：


　　1、创建一个继承自 React.Component 类的 ES6 class 同名类；

　　2、添加一个 类构造函数(class constructor) 初始化 this.state，注意我们如何将 props 传递给基础构造函数。

　　3、添加一个名为 render() 的方法；　　　　

　　4、在render() 方法 用this.state.date。

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

　　注意点：


　　1、不要直接修改 state(状态),用 setState() 代替。唯一可以分配 this.state 的地方是构造函数。

this.state.comment = 'Hello';// 错误
this.setState({comment: 'Hello'});// 正确

　　2、state(状态) 更新可能是异步的
　　React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。setState() 的格式，它可以接收一个对象或一个函数，第一个参数表示前一个状态，第二个参数表示应用更新时的 props 。为了避免异步更新引起的错误，可以给 setState()传函数
　　3、数据向下流动
　　state(状态) 被称为 本地状态 。 一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)。任何 state(状态) 始终由某个特定组件所有，并且从该 state(状态) 导出的任何数据 或 UI 只能影响树中 “下方” 的组件。如果把组件树想像为 props(属性) 的瀑布，所有组件的 state(状态) 就如同一个额外的水源汇入主流，且只能随着主流的方向向下流动。

以上是 React-本地状态(state) 的全部内容， 来源链接： utcz.com/z/384234.html

回到顶部