组件的三大核心属性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 };
});

注意事项

1. setState()直接使用是异步的，在原生事件和setTimout中使用是同步的
2. 多次setState()会自动合并，但是使用传入函数的方式，无法合并，传入对象可以
3. 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