react中state和props的区别有哪些？
发布时间：2024-02-22 点击：63
区别：props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）。state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变。
相关推荐：《react视频教程》
props
react的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于react是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。
用法
假设我们现在需要实现一个列表，根据react组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：<itemlist/>和<item/>。
先看看<itemlist/>
import item from "./item";export default class itemlist extends react.component{ const itemlist = data.map(item => <item item=item />); render(){ return ( {itemlist} ) }}列表的数据我们就暂时先假设是放在一个data变量中，然后通过map函数返回一个每一项都是<item item='数据'/>的数组，也就是说这里其实包含了data.length个<item/>组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。
在<item />中是这样的：
export default class item extends react.component{ render(){ return ( <li>{this.props.item}</li> ) }}在render函数中可以看出，组件内部是使用this.props来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个item属性，所以通过this.props.item来获取即可。
只读性
props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。
默认参数
在组件中，我们最好为props中的参数设置一个defaultprops，并且制定它的类型。比如，这样：
item.defaultprops = { item: 'hello props',};item.proptypes = { item: proptypes.string,};关于proptypes，可以声明为以下几种类型：
optionalarray: proptypes.array,optionalbool: proptypes.bool,optionalfunc: proptypes.func,optionalnumber: proptypes.number,optionalobject: proptypes.object,optionalstring: proptypes.string,optionalsymbol: proptypes.symbol,总结
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
state
state是什么呢？
state is similar to props, but it is private and fully controlled by the component.一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state
用法
export default class itemlist extends react.component{ constructor(){ super(); this.state = { itemlist:'一些数据', } } render(){ return ( {this.state.itemlist} ) }}首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。
setstate
state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setstate()方法来修改state。
比如，我们经常会通过异步操作来获取数据，我们需要在didmount阶段来执行异步操作：
componentdidmount(){ fetch('url') .then(response => response.json()) .then((data) => { this.setstate({itemlist:item}); }}当数据获取完成后，通过this.setstate来修改数据状态。
当我们调用this.setstate方法时，react会更新组件的数据状态state，并且重新调用render方法，也就是会对组件进行重新渲染。
注意：通过this.state=来初始化state，使用this.setstate来修改state，constructor是唯一能够初始化的地方。
setstate接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象，比如：
export default class itemlist extends react.component{ constructor(){ super(); this.state = { name:'axuebin', age:25, } } componentdidmount(){ this.setstate({age:18}) }}在执行完setstate之后的state应该是{name:'axuebin',age:18}。
setstate还可以接受第二个参数，它是一个函数，会在setstate调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：
this.setstate({ name:'xb'},()=>console.log('setstate finished'))总结
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setstate来修改，修改state属性会导致组件的重新渲染。
区别
props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；
没有state的叫做无状态组件，有state的叫做有状态组件；
多用props，少用state。也就是多写无状态组件。
更多编程相关知识，请访问：编程教学！！
怎样充分发挥网络推广优势？
如何建设好的网站？企业网站建设如何定位？
有哪些后缀是可以在国内注册和备案呢？
vip域名注册价是多少钱？注册vip域名有什么好处？
CSS+DIV Hack兼容问题的讨论
待删除域名抢注预订
top域名怎么样
启用新顶级域名，需要注意什么？
相关推荐：《react视频教程》
props
react的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于react是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。
用法
假设我们现在需要实现一个列表，根据react组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：<itemlist/>和<item/>。
先看看<itemlist/>
import item from "./item";export default class itemlist extends react.component{ const itemlist = data.map(item => <item item=item />); render(){ return ( {itemlist} ) }}列表的数据我们就暂时先假设是放在一个data变量中，然后通过map函数返回一个每一项都是<item item='数据'/>的数组，也就是说这里其实包含了data.length个<item/>组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。
在<item />中是这样的：
export default class item extends react.component{ render(){ return ( <li>{this.props.item}</li> ) }}在render函数中可以看出，组件内部是使用this.props来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个item属性，所以通过this.props.item来获取即可。
只读性
props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。
默认参数
在组件中，我们最好为props中的参数设置一个defaultprops，并且制定它的类型。比如，这样：
item.defaultprops = { item: 'hello props',};item.proptypes = { item: proptypes.string,};关于proptypes，可以声明为以下几种类型：
optionalarray: proptypes.array,optionalbool: proptypes.bool,optionalfunc: proptypes.func,optionalnumber: proptypes.number,optionalobject: proptypes.object,optionalstring: proptypes.string,optionalsymbol: proptypes.symbol,总结
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
state
state是什么呢？
state is similar to props, but it is private and fully controlled by the component.一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state
用法
export default class itemlist extends react.component{ constructor(){ super(); this.state = { itemlist:'一些数据', } } render(){ return ( {this.state.itemlist} ) }}首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。
setstate
state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setstate()方法来修改state。
比如，我们经常会通过异步操作来获取数据，我们需要在didmount阶段来执行异步操作：
componentdidmount(){ fetch('url') .then(response => response.json()) .then((data) => { this.setstate({itemlist:item}); }}当数据获取完成后，通过this.setstate来修改数据状态。
当我们调用this.setstate方法时，react会更新组件的数据状态state，并且重新调用render方法，也就是会对组件进行重新渲染。
注意：通过this.state=来初始化state，使用this.setstate来修改state，constructor是唯一能够初始化的地方。
setstate接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象，比如：
export default class itemlist extends react.component{ constructor(){ super(); this.state = { name:'axuebin', age:25, } } componentdidmount(){ this.setstate({age:18}) }}在执行完setstate之后的state应该是{name:'axuebin',age:18}。
setstate还可以接受第二个参数，它是一个函数，会在setstate调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：
this.setstate({ name:'xb'},()=>console.log('setstate finished'))总结
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setstate来修改，修改state属性会导致组件的重新渲染。
区别
props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；
没有state的叫做无状态组件，有state的叫做有状态组件；
多用props，少用state。也就是多写无状态组件。
更多编程相关知识，请访问：编程教学！！
怎样充分发挥网络推广优势？
如何建设好的网站？企业网站建设如何定位？
有哪些后缀是可以在国内注册和备案呢？
vip域名注册价是多少钱？注册vip域名有什么好处？
CSS+DIV Hack兼容问题的讨论
待删除域名抢注预订
top域名怎么样
启用新顶级域名，需要注意什么？