React props和state的区别

属性vs状态

• 属性（props） = vue 中的 props
• 状态（state） = vue 中的 data

相同点

• props 和 state 都是js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点

功能	props	state
从父组件获取	yes	no
由父组件修改	yes	no
内部设置默认值	yes	yes
在组件内部修改	no	yes
设置子组件初始值	yes	no
修改子组件的值	yes	no

• state 作用

主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

• props 作用

主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

---

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

• 如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props
• 总结：props 传参，不能更改；state 组件自己的状态值，能更改