【React】状态(State) 和 属性(Props)的区别

• props 是组件对外的接口

组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。

• state 是组件对内的接口

组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。

根据对外接口props 和对内接口state，组件计算出对应界面的UI。

• 主要区别：

1.props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口

2.state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。

3.在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

4.props主要是用于组件之间传递参数，获取组件的属性值。 组件之间数据单向流动 ，从父组件流向子组件。

5.state主要用于组件更新控制，如果想重新渲染或更新组件，只需要修改state即可，然后根据具体修改的state,

6.props和state是经常要结合使用的，父组件的state可以转化为props来为子组件进行传值。在这种情况下，子组件接收的props是只读的，想要改变值，只能通过父组件的state对其进行更改。

• Props的使用

当一个组件被注入一些属性（Props ）值时，属性值来源于它的父级元素，所以人们常说，属性在 React 中是单向流动的：从父级到子元素。

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组件外向组件内传递变化的数据

2. 注意: 组件内部不要修改props数据

3. 组件类的构造函数
   constructor (props) {
   super(props)
   console.log(props) // 查看所有属性
   }

• State的使用

React 的核心思想是组件化，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。

状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是state是私有的，可以认为state是组件的“私有属性（或者是局部属性）”。

setState( )
通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成后，调用可选的callback回调。（大部分情况下不需要调用回调，因为React会负责把界面更新到最新状态）