文章后面提到:无论是props还是state的变化都会触发重新渲染。
Props(属性)是组件的配置,也可以说是选项。它们从上层组件接收并且是不可变的。
- 那么props可以改变,但是它们应该是不可变的吗?
- 什么时候应该使用props,什么时候应该使用state?
- 如果一个React组件需要数据,应该通过props传递还是在React组件中设置
getInitialState
?
文章后面提到:无论是props还是state的变化都会触发重新渲染。
Props(属性)是组件的配置,也可以说是选项。它们从上层组件接收并且是不可变的。
getInitialState
?Props和state是相关的。一个组件的状态通常会成为其子组件的props。Props通过父组件的render方法中作为React.createElement()
的第二个参数,或者如果您正在使用JSX,则作为更熟悉的标记属性传递给子组件。
<MyChild name={this.state.childsName} />
父组件中的状态值 childsName
将变为子组件的 this.props.name
。从子组件的角度来看,名称属性是不可变的。如果需要更改它,父组件应该只更改其内部状态:
this.setState({ childsName: 'New name' });
而 React 会为您传播它到子级。一个自然的后续问题是:如果子级需要更改其 name 属性怎么办?通常可以通过子事件和父回调来完成这个任务。例如,子组件可能公开一个名为 onNameChanged
的事件。然后,父组件将通过传递回调处理程序来订阅该事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
孩子组件会通过调用 this.props.onNameChanged('新名字')
,将其请求的新名称作为参数传递给事件回调函数,父组件将在事件处理程序中使用该名称来更新其状态。
handleName: function(newName) {
this.setState({ childsName: newName });
}
对于家长与孩子之间的沟通,只需传递props即可。
使用state在控制器视图中存储当前页面所需的数据。
使用props将数据和事件处理程序传递给子组件。
这些列表应该有助于指导您在组件中处理数据时的工作。
Props
State
通过将其与纯 JS 函数相关联,您可以最好地理解它。
简单来说,
State 是组件的本地状态,无法在组件外部访问和修改。它相当于函数中的局部变量。
纯 JS 函数
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
React 组件
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
属性(Props),则为组件提供了从其父组件接收数据的能力,使得组件可重复使用。它们相当于函数参数。
普通JS函数
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');
React组件
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
我最喜欢的 props vs state 总结在这里:react-guide 感谢那些人。以下是该页面的编辑版本:
精简版 如果组件在某个时刻需要更改其中一个属性,那么该属性应该成为其状态的一部分,否则它应该只是该组件的一个 prop。
props (短语 properties)是组件的配置。它们从上面接收并且就组件而言是不可变的。一个组件不能更改其 props,但其应负责组合子组件的 props。Props 不仅可以是数据 - 回调函数也可以作为 props 传递。
state 是数据结构,在组件挂载时具有默认值。随着时间推移,它可能会发生变化,主要是由于用户事件的影响。
组件内部管理自己的状态。除了设置初始状态外,组件没有处理其子组件状态的任务。你可以将状态视为该组件的私有属性。
props state 父组件是否可以给它设置初始值? 可以 可以 父组件是否可以更改它的值? 可以 不行 是否可以在组件内部设置默认值?* 可以 可以 是否可以在组件内部更改它的值? 不行 可以 是否可以为子组件设置初始值? 可以 可以 是否可以在子组件中更改值? 可以 不行
状态是可选的。因为状态会增加复杂性并减少可预测性,所以没有状态的组件更可取。即使你显然无法在交互式应用中没有状态,你也应该避免有太多具有状态的组件。
无状态组件 只有 props 没有 state。它们的功能除了 render() 函数外几乎没有其他东西。它们的逻辑围绕接收到的 props 进行处理,这使得它们非常容易理解和测试。
有状态组件 既有 props 也有 state。当你的组件必须保留一些状态时,就需要使用它们。这是客户端和服务器通信(XHR、WebSockets 等)、处理数据和响应用户事件的好地方。这些逻辑应该封装在适量的有状态组件中,并且所有可视化和格式化逻辑都应该向下移动到许多无状态组件中。
Props和State的主要区别在于,State是内部状态,由组件自身控制,而Props是外部状态,由渲染组件的内容控制。
function A(props) {
return <h1>{props.message}</h1>
}
render(<A message=”hello” />,document.getElementById(“root”));
class A extends React.Component{
constructor(props) {
super(props)
this.state={data:"Sample Data"}
}
render() {
return(<h2>Class State data: {this.state.data}</h2>)
}
}
render(<A />, document.getElementById("root"));
props(缩写为“属性”)和state都是普通JavaScript对象。虽然它们都保存影响渲染输出的信息,但它们有一个重要的区别:props被传递给组件(类似于函数参数),而state在组件内部管理(类似于在函数内声明变量)。
简单来说,state仅限于当前组件,而props可以传递到任何您希望的组件...您可以将当前组件的state作为prop传递给其他组件...
另外,在React中,我们有无状态组件(stateless components),它们只有props而没有内部状态...
以下示例展示了它们如何在您的应用程序中工作:
父组件(具有状态的组件):
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
子组件(无状态组件):
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
基本上,它们的区别在于状态类似于面向对象编程中的属性: 它是一个组件的局部变量,用于更好地描述它。 Props则类似于参数 - 它们从组件的调用者(父组件)传递给组件: 就像您使用特定参数调用函数一样。
在React中,状态和属性都用于控制组件内的数据,一般情况下,属性是由父组件设置并传递给子组件,并且在整个组件中是不变的。对于将要更改的数据,我们必须使用状态。而属性是不可变的,状态是可变的,如果您想更改属性,可以从父组件中进行更改,然后将其传递给子组件。
根据我在使用React时学到的知识:
props被用于一个组件从外部环境中获取数据,即另一个组件(纯函数、函数式或类)或通用类或JavaScript/TypeScript代码。
状态被用于管理组件的内部环境,即组件内部数据的变化。
Props: Props就是组件的属性,而React组件则是一个JavaScript函数。
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
const element = ;
这里的<Welcome name="Sara" />
将一个对象{name : 'Sara'}作为Welcome组件的props传递。为了从一个父组件向子组件传递数据,我们使用props。Props是不可变的,在组件的生命周期内,props不应该改变(将其视为不可变)。
状态:状态只能在组件内部访问。为了跟踪组件内的数据,我们使用状态。我们可以通过setState更改状态。如果我们需要将状态传递给子级,则必须将其作为props传递。
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}