前端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是多变的,可修改

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json