React的三大属性是什么

这篇文章主要为大家展示了“React的三大属性是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React的三大属性是什么”这篇文章吧。

React三大属性

props

• 组件是封闭的，接收外部数据应该通过props来实现

• 函数组件通过参数props来接收数据，props是一个对象； 类组件通过this.props接收数据。

• 传递数据：在组件标签上添加属性

函数组件

const Hello = (props) => {    console.log(props);    return (        <div>props:{props.name}</div>    )}ReactDOM.render(<Hello name="mimi" />, document.getElementById('root'))

类组件

class App extends React.Component {    render() {        console.log(this.props);        return (            <div>                props: {this.props.name}            </div>        )    }}ReactDOM.render(<App name="mimi" />, document.getElementById('root'))

在继承类的构造函数中必须调用super函数，super代表父类的构造函数。es6 要求，子类的构造函数必须执行一次super函数，否则会报错。但是super函数内的this指向的是当前类的实例。

构造器是否接受 props，是否传递给 super，取决于是否希望在构造器中通过 this访问props。

• 当构造器中接收了props参数，super没有传递props，此时this.props是undefined，当然可以正常使用props（前边不加this）

• 当构造器中接收了props参数，super也传递props，可以通过this.props拿到对象。

原因：类组件会继承React.Component，而Component的源码是：

function Component(props, context, updater) {  this.props = props;      //绑定props  this.context = context;  //绑定context  this.refs = emptyObject; //绑定ref  this.updater = updater || ReactNoopUpdateQueue; //上面所属的updater 对象}

当我们在类组件中调用super，实际上是在执行父类的构造函数，如果没有将props传入super函数，那么在子类的构造函数中，this.props是undefined。

为什么仍然可以在 render和其他方法中访问 this.props。因为React 会在构造函数被调用之后，会把 props 赋值给刚刚创建的实例对象。

state

有状态组件和无状态组件

• 函数组件又叫做无状态组件，函数组件没有自己的状态，只负责数据的静态展示。

• 类组件又叫做有状态组件，类组件有自己的状态，负责更新UI，让页面动起来。

• 状态（state）就是数据，是组件内部的私有数据，只能在组件内部使用。

每个组件都有state,它的值是对象类型；组件state属性的初始化放在构造方法中。

class App extends React.Component {    constructor() {        super();        // 初始化state        this.state = {            count: 0        }    }    render() {        return (            <div>计数器：{this.state.count}</div>        )    }}ReactDOM.render(<App2 />, document.getElementById('root'))

• 状态是可变的:this.setState({要修改的数据})

• 注意不要直接通过this.state.x = y 修改state中的数据，这是错误的写法.

• etState的作用：

修改state
2. 更新UI

setState

执行setState()的位置?

• 在react控制的回调函数中: （异步）

• 生命周期勾子 ，react事件监听回调（合成事件）

• 非react控制的异步回调函数中: （同步）      

• 定时器回调 ，原生事件监听回调 ， promise回调

setState是异步还是同步？

setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的。只是在 React 的 setState 函数实现中，会根据 isBatchingUpdates(默认是 false) 变量判断是否直接更新 this.state 还是放到队列中稍后更新。然后有一个 batchedUpdate 函数，可以修改 isBatchingUpdates 为 true，当 React 调用事件处理函数之前，或者生命周期函数之前就会调用 batchedUpdate 函数，这样的话，setState 就不会同步更新 this.state，而是放到更新队列里面后续更新。

这样你就可以理解为什么原生事件和 setTimeout/setinterval 里面调用 this.state 会同步更新了，因为通过这些函数调用的 React 没办法去调用 batchedUpdate 函数将 isBatchingUpdates 设置为 true，那么这个时候 setState 的时候默认就是 false，那么就会同步更新。

props和state属性的区别

props 是组件对外的接口，state 是组件对内的接口。

主要区别：

• State是可变的，是一组用于反映组件UI变化的状态集合。

• 而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。

refs

refs是弹性文件系统，在React中可以获取React元素或DOM元素。

 我们在日常写React代码的时候，一般情况是用不到Refs这个东西，因为我们并不直接操作底层DOM元素，而是在render函数里去编写我们的页面结构，由React来组织DOM元素的更新。凡事总有例外，总会有一些很奇葩的时候我们需要直接去操作页面的真实DOM，这就要求我们有直接访问真实DOM的能力，而Refs就是为我们提供了这样的能力。

React.createRef

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是专人专用的:

class App extends React.Component {  inputRef = React.createRef();  showData = () => {    let input = this.inputRef.current;    console.log(input.value)  }  render() {    return (      <div>        <input ref={this.inputRef} type="text" />        <button onClick={this.showData}>提示</button>      </div>    )  }}

ref的绑定

class Person extends React.Component{    constructor(){        super();        this.handleClick = this.handleClick.bind(this);    }    handleClick(){        // 使用原生的 DOM api 获取焦点        this.refs.myInput.focus();    }    render(){        return (            <div>                <input type="text" ref="myInput" />                <input                    type="button"                    value="点我输入框获取焦点"                    onClick={this.handleClick}/>            </div>        );        }}ReactDOM.render(<Person />, document.getElementById('root'));

• 当 ref 属性用于 HTML 元素时，使用 React.createRef()或者React.useRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。

• 当 ref 属性用于 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。

• 你不能在函数组件上使用 ref 属性，因为他们没有实例。函数组件可以使用useRef()，它所返回的对象在组件的整个生命周期内不变。

以上是“React的三大属性是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！