What are the differences between state and props in react?

Difference: props are passed to the component (similar to the formal parameters of a function), while state is managed inside the component by the component itself (similar to a variable declared within a function). State is the component's own data management and control of its own state, which is variable; props is the data parameters passed in from the outside and is immutable.

The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

Related recommendations: "React Video Tutorial"

props

The core idea of ​​React is With the componentization idea, the page will be divided into some independent and reusable components. The

component is conceptually a function that can accept one parameter as an input value. This parameter is props, so props can be understood as being passed in from the outside. Data inside the component. Since React is a one-way data flow, props is basically the data passed from the parent component to the child component.

Usage

Suppose we need to implement a list now. According to the React componentization idea, we can treat the rows in the list as a component, that is, there are two Components: <itemlist></itemlist> and <item></item>.

Let’s take a look at the data of the <itemlist></itemlist>

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

list. Let’s temporarily assume that it is placed in a data variable. Then use the map function to return an array in which each item is <item item="data"></item>, which means that it actually contains data.length <item></item> component, data is passed by customizing a parameter on the component. Of course, you can pass as many custom parameters as you want here.

In <item></item> it looks like this:

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

As can be seen in the render function, the component uses this.propsTo get all the data passed to the component, it is an object that contains all your configuration of this component. Now it only contains one item attribute, so through this.props.itemJust get it.

Read-only

props are often used for rendering components and initialization state. When a component is instantiated, its props is read-only and cannot be changed. If props can be changed during the rendering process, the display form of this component will become unpredictable. New props can only be passed into the component through re-rendering of the parent component.

Default parameters

In the component, we'd better set a defaultProps for the parameters in props, and formulate its type. For example, this:

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

About propTypes, it can be declared as the following types:

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

Summary

props is a parameter passed into the component from the outside. Its main function is to pass data from the parent component to the child component. It is readable and immutable. New props can only be actively passed in through external components. to re-render the sub-component, otherwise the props and presentation form of the sub-component will not change.

state

What is state?

State is similar to props, but it is private and fully controlled by the component.

The display form of a component can be determined by the data state and external parameters. The external parameters are props, and the data state is state

Usage

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

First, when the component is initialized, set an initial state to the component through this.state. This data will be used to render the component once render.

setState

stateThe difference from props is that state can be changed of. However, it cannot be modified directly through this.state=, but state needs to be modified through the this.setState() method.

For example, we often obtain data through asynchronous operations. We need to perform asynchronous operations in the didMount stage:

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

When the data acquisition is completed, through this.setStateTo modify the data state.

When we call the this.setState method, React will update the component's data state state and re-call the render method, that is The component will be re-rendered.

Note: Use this.state= to initialize state, use this.setState to modify state, constructor is the only place that can be initialized.

setStateAccepts an object or function as the first parameter. You only need to pass in the part that needs to be updated. There is no need to pass in the entire object, such as:

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在执行完setState之后的state应该是{name:'axuebin',age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

总结

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

区别

• props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
  

• state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用props，少用state。也就是多写无状态组件。

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of What are the differences between state and props in react?. For more information, please follow other related articles on the PHP Chinese website!