在React-Native中使用功能的差异

小编典典

在React-Native中使用功能的差异

reactjs

可以说我有一些通过函数的组件。

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()}}？

阅读 287

2020-07-22

共1个答案

小编典典

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

onLayout={this._someFunc()}

每次渲染组件时，onLayoutprop都会从this._someFunc()函数中获取返回值。换句话说，该函数将在每个渲染器上运行。

onLayout={() => {return this._someFunc()}} 要么 onLayout={() => this._someFunc()}

每次渲染组件时，onLayout道具都会将引用绑定到一个匿名函数，该匿名函数包含对该函数的调用_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"。

在component中B，fooprop将是对您以后可以调用的函数的引用。该函数将依次调用_someFunc并返回"bar"。因此，如果要在组件B中获取值，则需要使用进行调用this.props.foo()。

2020-07-22