state 与 props

Tue, 17 Dec 2024 00:00:00 +0800

state

基本定义

state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

props

基本定义

props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改。

代码示例

// 父组件
import stateJj from './stateJj.js'; // 引入子组件
class stateJjFather extends React.Component {
 constructor(props) {
 super(props);
 // 设置state的默认值 且只能在constructor中设置
 this.state = {
 mes: '给子组件的信息',
 obj： {

 },
 arr: []
 }
 }
 fun(e) {

 }
 render() {
 const {mes, obj, arr} = this.state;
 return (
 <div>
 // 不写箭头函数 this指向会发生错误 也可以使用bind的方式绑定this
 <stateJj name={'给子组件的信息'} name1={mes} fun={(e) => this.fun(e)} obj={obj} arr={arr} />
 </div>
 );
 }
}
// 子组件
class stateJj extends React.Component {
 constructor(props) {
 super(props);
 this.props; // 这里面就有父组件传的值
 // 设置 默认state
 this.state = {
 text: props.initialValue || 'placeholder'
 };

 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }

 handleChange(event) {
 this.setState({
 text: event.target.value
 });
 }

 render() {
 return (
 <div>
 {mes}
 </div>
 );
 }
}
// 设置props值的类型
stateJj.propTypes = {
 optionalArray: PropTypes.array,
 optionalBool: PropTypes.bool,
 optionalFunc: PropTypes.func,
 optionalNumber: PropTypes.number,
 optionalObject: PropTypes.object,
 optionalString: PropTypes.string,
 optionalSymbol: PropTypes.symbol, // 目前可以声明的所有变量类型
};
// 设置默认的props值
stateJj.defaultProps = {
};

props的特性

只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

State 与 Props on Last Stand

state 与 props

state

基本定义

props

基本定义

代码示例

props的特性