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

相关推荐
小桥风满袖38 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心39 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~42 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒1 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js