前端react面试题:state和props有什么区别?

前端react面试题:state和props有什么区别?

回答思路:什么是state-->什么是props-->他们的相同点-->他们的区别

什么是state?

一个组件的状态可以由数据和外部参数所决定,而数据状态是state,一般在construct中初始化,通过setState()方法修改值的状态,从而达到更新组件内部数据的作用,并且重新调用组件的render方法

例如:

javascript 复制代码
class Button extends React.Component{
construct(){
	super();
	this.state = {
		count:0,
	};
	}
	addCount((preState,props)=>{
		return {count:preState.count+1};
	});
	render(){
		return (
			<button onClick={()=>this.addCount()}>
				Clicked {this.state.count} times
			</button>
		);
	}
}

setState还可以接受第二个参数,一个函数,在setState调用完成并且组件开始重新渲染时被调用,可用来监视是否完成渲染

javascript 复制代码
this.setState(
	{
		state:"132",
	},
	()=>{console.log("setState finished")}
)

什么是props

组件接受一个参数作为输入值,这个参数就是props,props是外部传入组件内部的数据,react具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据,props可以传字符串,数字,还可以传对象,数组,回调函数

例如:

javascript 复制代码
class Welcome extends React.component{
	render(){
		return (
			<h1>Hello {this.props.name}</h1>
		)
	}
}
const element = <Welcome name="Tom" onNameChange={this.handleName} />

Welcome中的name和onNameChange方法都能在子组件的props变量中访问,在子组件中props不可以改变,如果想改变他应该传入新的props来重新渲染组件

他们的相同点

1.两者都是JS对象

2.都用于保存信息

3.都能触发渲染更新

他们的区别

1.props是外部传递给组件的,state是组件内部自己管理的,一般在constructor中初始化

2.props在组件内部不能修改,state在组件内部可以修改

3.state是多变的,可修改

相关推荐
y先森3 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端