react state 状态数据

手机软件开发 · 2024-9-22 12:43:29

props 和 state
props 特点是只读，即修改不会让视图同步更新，想要更新必须再次调用 render() 渲染函数
state 特点是可读可写，在利用 this.setState({属性名: 属性值}) 修改时会同步更新视图
state 创建和利用
state 必须在类组件的 constructor 内部，通过 this.state = {属性名:属性值} 界说
state 渲染数据：在当前类的 render 函数中，利用 this.state.属性，
state 设置数据：在当前类中，利用 this.setState({属性名: 属性值}) 方法
注意事项
this.setState() 是异步的，假如须要在数据改变后实行，可以在 this.setState() 的回调函数中实行

import React from "react";class Component1 extends React.Component { constructor(props) { super(props); this.state = { state1: "状态1", propsState: this.props.other, }; } fnChange1 = () => { this.setState({ state1: "厘革后的状态 state1" }, () => { console.log(this.state.state1); }); console.log(this.state.state1); }; fnChange2 = () => { this.setState({ propsState: "厘革后的状态 propsState" }, () => { console.log(this.state.propsState); }); console.log(this.state.propsState); }; render() { return ( <div> <button onClick={this.fnChange1}>点击改变 state</button> <button onClick={this.fnChange2}>点击改变 state</button> <h1>{this.state.state1}</h1> <h1>{this.state.propsState}</h1> </div> ); }}function App() { return ( <div> <Component1 other="props 参数" /> </div> );}export default App;

react state 状态数据

所属分类: 问答交流

新帖推荐: 30日

推荐作品