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

相关推荐
十八朵郁金香2 分钟前
深入解析:ES6 中 class 与普通构造器的区别
前端·ecmascript·es6
索迪迈科技13 分钟前
CommonJS与ES6模块的区别
前端·ecmascript·es6
前端Hardy15 分钟前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy24 分钟前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
nightunderblackcat24 分钟前
新手向:中文语言识别的进化之路
前端·javascript·easyui
Spider_Man1 小时前
打造属于你的前端沙盒 🎉
前端·typescript·github
用户47949283569151 小时前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
掘金一周1 小时前
凌晨零点,一个TODO,差点把我们整个部门抬走 | 掘金一周 9.11
前端·人工智能·后端
用户8174413427481 小时前
kubernetes核心概念 Service
前端
xingkongv1 小时前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架