我想知道,在 React.js 中,在组件中声明匿名函数、命名函数或方法之间是否存在性能差异。
具体来说,以下一项是否比其他项更高效?
class MyComponent extends React.Component {
render() {
return (
<input
type="text"
value={foo}
onChange={(e) => {
this.setState({ foo: e.target.value });
}}
/>
);
}
}
class MyComponent extends React.Component {
...
render() {
function handleChange(e) {
this.setState({ foo: e.target.value });
}
return (
<input
type="text"
value={foo}
onChange={handleChange}
/>
);
}
}
class MyComponent extends React.Component {
...
handleChange(e) {
this.setState({ foo: e.target.value });
}
render() {
return (
<input
type="text"
value={foo}
onChange={this.handleChange}
/>
);
}
}
最佳答案
是的,肯定有,您的代码的第三个版本是在 React 组件的渲染 block 中引用函数的正确方法。
为什么?
通常,嵌套函数被认为是将被调用不止一次或两次的方法的反模式;这主要是由于 JavaScript 引擎将函数视为任何其他值,并且必须创建并随后在父调用完成后销毁它。
如果您需要能够从 handleChange()
中访问 this
,您需要将该方法绑定(bind)到组件的上下文。以下是不会对性能产生任何负面影响的方法。
Vanilla ES6 通过构造函数:
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({ foo: e.target.value });
}
render() {
return (
<input
type="text"
value={foo}
onChange={this.handleChange}
/>
)
}
}
类属性中的箭头函数(需要带有 transform-class-properties 的 babel):
class MyComponent extends React.Component {
handleChange = (e) => {
this.setState({ foo: e.target.value });
}
render() {
return (
<input
type="text"
value={foo}
onChange={this.handleChange}
/>
)
}
}
装饰类方法(需要带有 transform-decorators-legacy 和 core-decorators 的 babel):
import { autobind } from 'core-decorators'
class MyComponent extends React.Component {
@autobind
handleChange(e) {
this.setState({ foo: e.target.value });
}
render() {
return (
<input
type="text"
value={foo}
onChange={this.handleChange}
/>
)
}
}
希望这对您有所帮助!
关于javascript - react 性能 : anonymous function vs named function vs method,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42571091/