假设我有一个向其传递函数的组件。
export default class SomeComp extends Component {
constructor(props) {
super(props);
}
_someFunc = () => {
return ...
}
render() {
return (
<View
onLayout={this._someFunc()}
/>
OR
<View
onLayout={() => {this._someFunc()}}
/>
)
}
}
区别在哪里onLayout={this._someFunc()}
and onLayout={() => {this._someFunc()}}
?
差异实际上取决于如何以及何时onLayout
被触发。
-
onLayout={this._someFunc()}
每次渲染你的组件时onLayout
prop 将从中获取返回值this._someFunc()
功能。换句话说,该函数将在每次渲染时运行。
-
onLayout={() => {return this._someFunc()}}
or onLayout={() => this._someFunc()}
每次渲染你的组件时onLayout
prop 会将引用绑定到一个匿名函数,该函数包含对_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
the foo
prop 将得到的值"bar"
.
在组件中B
the foo
prop 将是对稍后可以调用的函数的引用。该函数将依次调用_someFunc
这将返回"bar"
。所以如果在组件中B
你想获得这个值,你需要用它来调用它this.props.foo()
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)