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

相关推荐
快起来别睡了9 分钟前
React 是如何用 JSX 写页面,却能被浏览器执行的?——Babel 的魔法解析
前端
喧星Aries20 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺22 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福24 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户408128120038124 分钟前
JWT 和 token 区别
前端
盏茶作酒2925 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天26 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪26 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽26 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课26 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js