- 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;
