前端react面试题：state和props有什么区别？

laowang3572024-01-22 21:44

前端react面试题：state和props有什么区别？

回答思路：什么是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是多变的，可修改