javascript - 在 react-native 中使用函数的区别

Question

假设我有一些组件 wo，我传递了一个函数。

export default class SomeComp extends Component {
    constructor(props) {
        super(props);
    }

    _someFunc = () => {
        return ...
    }

    render() {
        return (
            <View
                onLayout={this._someFunc()}
            />

或

            <View
                onLayout={() => {this._someFunc()}}
            />

        )
    }
}

onLayout={this._someFunc()}和onLayout={() => {this._someFunc()}}有什么区别？

Answer 1

差异实际上取决于 onLayout 的触发方式和时间。

• onLayout={this._someFunc()}

  每次渲染你的组件时，onLayout 属性都会从 this._someFunc() 函数中获取返回值。换句话说，该函数将在每次渲染时运行。

• onLayout={() => {return this._someFunc()}} 或 onLayout={() => this._someFunc()}

  每次渲染组件时，onLayout 属性都会将引用绑定(bind)到匿名函数，该函数包含对 _someFunc() 函数的调用。除非以某种方式触发 onLayout，否则不会执行后一个函数。

---

例如，假设有以下组件:

class MyApp extends React.Component {

  _someFunc = () => {
    return "bar";
  }

  render() {
    return(
      <div>
        <A foo={this._someFunc()} />
        <B foo={() => {return this._someFunc()}} />
      </div>
    );
  }
}

const A = ({foo}) => {
  console.log(foo);  //prints "bar"
  return <div>A</div>;
}

const B = ({foo}) => {
  console.log(foo);  //prints the reference to _someFunc()
  console.log(foo());  //prints "bar"
  return <div>B</div>;
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

在组件 A 中，foo 属性将获得 "bar" 的值。

在组件 B 中，foo 属性将是对您稍后可以调用的函数的引用。该函数将依次调用 _someFunc，后者将返回 “bar”。所以如果在组件 B 中你想获取值，你需要用 this.props.foo() 调用它。