react中的state和props详解

前言

React中数据的流向是自顶向下(从父组件到子组件)单向流动的,数据主要存储在State和Props中,接下来将会详细介绍这俩个属性的作用;

state

react通过调用setState(data,callback)这个方法,通过改变state的值来控制用户界面的改变,用户界面会随着state的变化而重新渲染,渲染结束后会调用callback方法进行回调,callback回调可有可无;用法如下:

(1)this.state.name = name; this.setState(this.state);此种渲染方法会把所有state都检测一遍,不建议使用;

(2)this.setState({name:name});此种渲染方法直接改变state中name的值;

props

props常用于渲染组件和初始化状态,当组件被实例化后,props是只读的,不可改变的;props可以理解为从外部传入内部的数据,由于react的数据的单向的,所以props基本上就是从父级组件向子组件出传递数据;用法如下:

(1)this.state.name=this.props['name'];接受从父组件传递到子组件的数据name赋值给当前state;

总结

(1)props用于定义外部接口,state记录内部状态(没有state叫无状态组件,有state叫有状态组件);

(2)props在外部组件中赋值,在组件内部值具有不可变性,state在内部组件中赋值;

(3)props的值不能被组件修改,state存在的目的就是组件通过修改其值来进行渲染;

建议

在项目搭建过程中,尽量多用props少用state,尽量多写无状态组件;

注:

在本文书写过程中,借鉴了前辈的写法,如侵必删;

猜你喜欢

转载自blog.csdn.net/qq_39266265/article/details/83414077
今日推荐