标签：总结 方便 决定 reac lin 手动 end 用户 def
一个组件的显示状态可以由内部状态state、外部参数props所决定。
上面的这句话价值100万美元。
啥叫内部和外部呢！
从我们组织程序的角度，入参是state，从后台返回的数据是外部参数时props。所以说state是万能的，可以看做是外部的也是内部的。
但是props 一定是外部的，如何进入内部呢,成为state呢，回调函数。
props：
1、props 是从外部传进组件的参数，主要是父组件向子组件传递数据。
2、props 对于使用它的组件来说是只读的。要想修改props，必须通过父组件修改。所以子组件的props 通常是父组件的state。
3、默认值
为了组件的健壮性，在传入props 的时候常给默认值。
|
1
2
3
4
5
6
|
const SubComponent=(props)=> { return （<h1>{props.name}</h1>）}SubComponent.defaultProps = { name: ‘Rain_tdk‘};<br>export default SubComponent |
4、为开发方便我们需要对props 的数据类型进行检验
|
1
2
3
4
5
6
7
8
9
10
11
|
import PropTypes from ‘prop-types‘;const SubComponent=(props)=> { return （<h1>{props.name}</h1>）}SubComponent.defaultProps = { name: ‘Rain_tdk‘};SubComponent.propTypes = { name: PropTypes.string};export default SubComponent |
更多检验参考 ：https://www.jianshu.com/p/2896acb5746b
state：
1、state是React组件中的私有对象，用于控制这个组件本身的状态
2、setState（）采用merge的方式修改state。setState会重新调用render（）刷新UI，直接通过this.state=‘xxx’的方式也会修改state但是不会重新渲染。
注：setState（{...newState}）当state为Object、Arrary 时diff 比较的是引用，不会刷新UI 。需要使用 concat /slice /...运算符等产生新引用的方法。
3、应用场景：
大部分组件的工作应该是从props里取数并渲染出来，但是当需要 用户输入、服务器请求、延定时变化 等作出响应。
通常在有状态state的组件中处理用户交互逻辑，并通过props传递给子组件（通常为无状态组件）中。
4、那些属性应该用state
state 中应该保存可能被事件处理器改变并触发用户页面更新的数据。
5、哪些属性不应该存储在state中
5-1、计算所得数据。计算数据应该在render（）中实现，如果存储在state中需要手动更新state 比较麻烦
5-2、基于props 的重复数据。组件中应该保持props为唯一的数据来源，除非需要知道历史数据是啥。
5-3、不要将React组件保存在state中。在render（）里使用props、state来创建他。
总结：state让你修改（不修改的数据别往state存）。props不让你修改。多个state、props共同影响UI 的时在render（）中实现。
标签：总结 方便 决定 reac lin 手动 end 用户 def
原文地址：https://www.cnblogs.com/sexintercourse/p/12423849.html
