React中的State与Props

Posted 2022-06-21 leophen

一、State

 

1、什么是 state

一个组件的显示形态可以由数据状态和外部参数决定，其中，数据状态为 state，外部参数为 props

 

2、state 的使用

组件初始化时，通过 this.state 给组件设置一个初始的 state，在第一次 render 时就会用这个数据渲染组件

class ItemList extends React.Component 
  constructor() 
    super();
    this.state = 
      data: ‘123‘
    ;
  
  render() 
    return (
      this.state.data
    )
  

 

3、setState 修改数据

state 可以通过 this.setState() 来修改数据，注意：调用 this.setState 方法时，React 会重新调用 render 方法

class ItemList extends React.Component 
  constructor() 
    super();
    this.state = 
      name: ‘hainiudd‘,
      age: 21,
    
  
  componentDidMount() 
    this.setState(
      age: 22
    )
  

 

4、总结

State 用于组件保存、控制以及修改自己的状态，只能在 constructor 中初始化，是组件的私有属性，不可通过外部访问和修改，通过组件内部的 this.setState 修改时会导致组件重新渲染

 

 

二、Props

 

1、什么是 props

props 可以理解为从外部传入组件内部的数据

 

2、props 的使用

父组件通过自定义属性进行传值，这里以传 lastName 的值为例：

Parent.js

class Parent extends React.Component 
  render() 
    return (
      <div>
        <Child lastName=‘Liu‘ />
      </div>
    )
  

 

子组件通过 this.props 获取，这里接收父组件传过来 lastName 的值

Child.js

class Child extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
  
  render() 
    return (
      <div>
        <h1>My lastname is this.props.lastName</h1>
      </div>
    )
  

 

渲染父组件：

ReactDOM.render(
  <div><Parent /></div>,
  document.getElementById(‘root‘)
);

 

运行结果：

 

3、props 的只读性

组件无论是使用函数声明还是 class 声明，都不能改变自身的 props，只有通过父组件重新渲染才可以把新的 props 传入组件中

 

4、总结

Props 是一个从外部传入组件的参数，用于父组件向子组件传递数据，具有可读性

 

 

三、State 与 Props 的区别

 

1、State 是组件自身的数据，可以改变

2、Props 是外部传入的数据，不可改变