数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究React.js 无状态组件 vs 有状态组件
理解 React 组件中无状态和有状态的区别
在状态管理文章中，我们学习了如何在 React 中处理状态变化。
- 无状态组件是简单的函数式组件，没有本地状态，但请记住，React 中也有一种 Hook 可以为函数式组件添加状态行为。
- 有状态组件可以包含状态对象和事件处理函数，以及用户操作。
- 无状态组件本质上是纯函数，执行非常特定的任务。
import React from 'react';
const player = (props) => {
return (
<div>
<p>I'm a Player: My name {props.name} and my score is
{props.score}</p>
{props.children}
</div>
);
}
export default player;上面就是一个这样的函数式组件，它只显示从另一个组件传递的 props 属性。我们可以从函数式组件调用位于类组件（容器）中的事件处理函数。
容器是指包含一些本地状态或事件或用户操作的组件。
我们可以在函数式组件中添加一些逻辑动态代码，但不能修改状态或应用程序数据。
从函数式组件传递方法引用
在动态输出文章中，我们已经了解了如何从父组件传递属性到子函数式组件。类似地，我们可以添加方法引用。
import React, {Component} from 'react';
import './App.css';
import Player from './Player'
class App extends Component {
state = {
players:[
{name: 'Smith', score:100 },
{name: 'David', score:90},
{name: 'Phil', score:80}
],
otherObject:'Test'
}
switchPlayerHandler = () =>{
this.setState({players:[
{name: 'Smith', score:200},
{name: 'David', score:290},
{name: 'Phil', score:380}]});
}
render(){
return (
<div className="App">
<button onClick={this.switchPlayerHandler}>
Switch Player
</button>
<Player name={this.state.players[0].name}
score={this.state.players[0].score}
click={this.switchPlayerHandler}/>
<Player name={this.state.players[1].name}
score={this.state.players[1].score}
click={this.switchPlayerHandler}>
Plays for Australia
</Player>
<Player name={this.state.players[2].name}
score={this.state.players[2].score}
click={this.switchPlayerHandler}/>
</div>
);
}
}
export default App;观察我们传递了一个方法引用
<Player name={this.state.players[2].name}
score={this.state.players[2].score}
click={this.switchPlayerHandler}/>我们可以在函数式组件中使用它，类似于 onClick 函数调用
import React from 'react';
const player = (props) => {
return (
<div>
<p onClick={props.click}>I'm a Player: My name {props.name} and my score is {props.score} </p>
{props.children}
</div>
);
}
export default player;向函数式组件中的方法引用传递参数
<button onClick={this.switchPlayerHandler.bind(this,'John','Test')}>
Switch Player
</button>使用上述语法，我们可以将 this 作为类绑定的第一个参数，其余参数是我们想要传递的值。
switchPlayerHandler = (newName,secondName) =>{
this.setState({players:[
{name: newName, score:200},
{name: secondName, score:290},
{name: 'Phil', score:380}
]});
}传递的值可以在函数中使用，如上所示。
还有一种替代方法可以传递方法参数。
onClick={ () => this.switchPlayerHandler('Michel','Stark') }以上是匿名函数调用。它的效果相同。这种方法不如第一种方法有效，因为 React 在第二次匿名函数调用时会进行一些渲染。如果我们不考虑性能损失，则取决于情况。
状态或应用程序数据的修改应该在少数几个选定的组件中完成，以避免复杂性。
更新于: 2019年9月4日
4K+ 浏览量
广告