React
中props
和state
的区别是:
props
是用来从父组件向子组件 进行传递数据的,在子组件中可以用props
来接收到父组件传递过来的参数。props
是不可变 的,用户不能在子组件中修改props
的值,因为从父组件中传递过来的值被认为是不可变数据。state
表示的组件的内部状态 ,是私有数据。state
是可变 的,用户可以通过setState
等来修改数据 ,且React
会根据state
的修改重新进行组件的渲染。
示例代码:
js
// 父组件
class ParentComponent extends React.Component {
render() {
return (
<ChildComponent name="John" age={25} />
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>Name: {this.props.name}</p>
<p>Age: {this.props.age}</p>
</div>
);
}
}
// 父组件
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
</div>
);
}
}