javascript - React 和无状态组件

Question

我看到了这条来自React Stateless Functional Components: Nine Wins You Might Have Overlooked的评论:

You should really avoid having function allocations inside statelless components. Just keep them outisde the scope and pass the props, it’s a very big performance difference.

我想知道，这是否是我的组件:

const Text = (props) =>  <p>{props.children}</p>;

// ReactDOM is part of the introduction of React 0.14
ReactDOM.render(
    <Text>Hello World</Text>, 
    document.querySelector('#root')
);

如何访问该文件之外的函数？我应该使用哪个属性？

Answer 1

只需将它们作为 Prop 传递即可。

function clickParagraph() {
  console.log('clicked!')
}

const Text = (props) =>
  <p onClick={props.onClick}>{props.children}</p>;


ReactDOM.render(
  <Text onClick={clickParagraph}>Hello World</Text>, 
  document.querySelector('#root')
);