React学习笔记17-属性VS状态

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-03

17.React学习笔记17-属性VS状态2023-11-03

18.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

相似点：

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

不同点：

1. 属性能从父组件获取，状态不能

2. 属性可以由父组件修改，状态不能

3. 属性能在内部设置默认值，状态也可以，设置方式不一样

4. 属性不在组件内部修改，状态要在组件内部修改

5. 属性能设置子组件初始值，状态不可以

6. 属性可以修改子组件的值，状态不可以

 

state 的主要作用是用于组件保存、控制、修改自己的可变状态。 state 在组件内部初始化，可以被

组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制

的数据源。 state 中状态可以通过 this.setState 方法进行更新， setState 会导致组件的重新渲

染。

 

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参

数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props ，否则组件的 props 永远保持

不变。

 

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件

（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有

状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。