将函数传递给React中的组件

Question

假设我有一个名为“Parent”的类组件，它呈现一个名为“Child”的组件：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            someProperty = 'some value',
        };
}

setProperty: newValue => {
    this.setState({someProperty: newValue});
}

render() {
    return < Child setProperty: {this.setProperty} />
}

和子组件：

const Child = props => {
    return <button onClick={props.setProperty('new value')} />
}

所以这是有效的，这对我来说很有意义：我们传递对setProperty的引用，然后只要点击子组件就可以了。

在许多教程中，我看到以下代码（在Parent中）：

render() {
    return < Child setProperty: {newValue => this.setProperty(newValue) />
}

传递函数时，这样做有什么好处？

Answer 1

传递函数时，这样做有什么好处？

这取决于如何定义this.setProperty 。 没有必要这样做或必要^**因为它不会起作用。

这一切都归结为this是如何工作的：

在“正常”的功能，价值this取决于函数是如何被调用 。 因此，如果this.setProperty是这样的正常功能，然后将它传递给与儿童setProperty={this.setProperty}使得不可能为孩子调用功能，使得this指的是父组件，这意味着主叫this.setState函数内部将失败。

 function callMe(callback) { callback(); } const obj = { foo: 42, normalFunction() { console.log(this.foo); }, }; callMe(obj.normalFunction); // not 42 :( callMe(() => obj.normalFunction()); // 42 :) 

但是，如果该函数是一个箭头的功能（如在你的第一个例子）或绑定的功能，那么价值this已经被预定并不要紧函数是如何调用。

 function callMe(callback) { callback(); } const obj = { foo: 42, normalFunction() { console.log(this.foo); }, }; obj.boundFunction = obj.normalFunction.bind(obj); callMe(obj.boundFunction); // 42 :) callMe(() => obj.boundFunction()); // 42 :) 

---

有关：

• 如何在回调中访问正确的`this`？
• “this”关键字如何运作？

-

**：当然，如果可以控制函数的定义方式，以任何特定方式传递函数都不是“必要的”。 这整个的答案是只盯着为什么有人可能会做这种方式。 如果更改函数的定义方式，则可以避免使用某种样式。

Answer 2

所以关于内联函数的讨论一直存在争议。 许多人认为内联函数不具备性能，并且还会使子组件重新呈现，导致不同的函数引用，特别是在使用PureComponent的情况下。

恕我直言，没有区别，但为什么不使用静态功能，而它们在任何情况下都可用

这只是一个示例，演示了使用静态函数和内联函数之间的区别：

class Test extends Component {
  render() {
    return(
      <button onClick={() => this.props.onUpdate(true)}>update</button>
    )
  }
}

// could be this as handleClick is the same reference in all renders
class Test2 extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.props.onUpdate(true);
  }
  render() {
    return (
      <button onClick={this.handleClick}>update</button>
    );
  }
}

更新：使用构造函数绑定静态函数