假设我有一些组件 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()}}
有什么区别?
最佳答案
差异实际上取决于 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()
调用它。
关于javascript - 在 react-native 中使用函数的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46192159/