[JavaScript知识库]2022年前端React的100道面试题的第12题：区分props和state

问题

对 props 和 state 设计理解正常的是？

选项

A. 它们都是纯 JS 对象。

B. props 只能来自父级，组件本身始终无法设置。

C. 只有在 state 变化触发时，才会触发组件更新渲染。

D. props 是一种将数据从父级传递给子级的方式， state 仅用于交互性，即随时间变化的数据。

答案

A、D

纠错

B. 如果选项是 ”props 只能来自父级，组件本身无法更新。“，那么就是正确的，是不能修改，而非不能设置。一个组件可以有默认的 props，也可以通过 defaultProps 设置默认值。

C. props 和 state 的变化都会触发组件更新渲染 。

解答

它们都是用来保存信息的，这些信息可以控制组件的渲染输出。

而它们的一个重要的不同点就是：props 是传递给组件的（类似于函数的形参），而 state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）。

props

默认情况下，组件没有状态。下面是以函数组件为例，最简单的参数：

function Welcome(props) {
 ?return <h1>Hello {props.name}</h1>;
}

props 由父组件设置的信息，尽管可以设置默认值，并且不能改变它。

state

主要用于用户的事件状态的管理，它应是一个可序列化的数据。它允许组件进行初始化、更改和使用的“私有”信息。

默认值

从父级组件传入的 props 值，和 state 初始值都会覆盖组件内定义的默认值。

下面是 props 的初始化示例：

class Welcome extends React.Component {
 ?render() {
 ? ?return <h1>Hello {this.props.name}</h1>;
  }
}
?
Welcome.defaultProps = {
 ?name: "world",
};

下面是 state 的初始化示例：

class Welcome extends React.Component {
 ? ?constructor() {
 ? ? ?super();
 ? ? ?this.state = {
 ? ? ? ?name: 'world',
 ? ?  };
 ?  }
}

来源

state和props之间的区别是什么

props-vs-state

ReactJS：props与state

来源

搜索《考试竞技》微信小程序