组件的三大核心属性state + props + ref
核心属性一：state
state：适用于类组件,React 类组件拥有自己的状态 state，state 状态改变时自动刷新组件（执行组件中的 render 方法）
修改状态
this.setState(nextState[,callback]) nextState: 将要设置的新状态，该状态会和当前的 state 合并 callback: 可选参数，回调函数。该函数会在 setState 设置成功，且组件重新渲染后调用. 复制代码
如果依赖上次setState()的结果：setState(fn [,callback])
this.setState((prevState) => { return { num: prevState.num + 1 }; }); 复制代码注意事项
setState()直接使用是异步的，在原生事件和setTimout中使用是同步的
多次
setState()会自动合并，但是使用传入函数的方式，无法合并，传入对象可以setState()会自动刷新组件，也可以利用forceUpdate()进行手动强制刷新
核心属性二：props
props：父组件传入子组件
接收方式
函数组件：通过函数的第一个参数
类组件：通过this.props访问
例如
<MyComponent data={100} name="tom" /> 取值：this.props.data this.props.name 复制代码props类型校验
给组件设置静态属性 propTypes 来设置组件各个属性的类型检查器, 用于限制传入属性的数据类型，在编写组件时比较有用
React 内置数据类型检查器 PropTypes
在React16版本之后，PropTypes从react包分离到
prop-types包中
import PropTypes from "prop-types"; class MyComponent extends React.Component{ } MyComponent.propTypes = { name: PropTypes.string } --------------------------------------------- class MyComponent extends React.Component{ staic propTypes = { name: PropTypes.string } } 复制代码注意：如果使用ts可以完全取代上述的写法
props和state的区别
state是组件的状态，可读可写，props是父组件传递过来的属性，是只读的
核心属性三：ref
应用位置
应用在元素节点上：对节点的引用
应用在组件上：对组件实例的引用
使用ref的场景
管理焦点，文本选择或者媒体播放
触发强制动画
集成第三方DOM库
设置方式
字符串形式的ref
<input ref="input1" /> 取值：this.refs.input1 复制代码
回调形式的ref（官网推荐）
<input ref={c => this.input1 = c} 相当于把当前节点（DOM）（input输入框）赋值给了组件的实例属性input1 取值：this.input1 复制代码createRef
myRef = React.createRef() <input ref={this.myRef} /> 取值：this.myRef.current 复制代码注意函数组件无法使用ref
作者：隔壁老网
链接：https://juejin.cn/post/7073100799362105381