React 和无状态组件答案

【问题标题】：React and stateless componentsReact 和无状态组件
【发布时间】：2016-12-17 02:06:27
【问题描述】：

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

您确实应该避免在无状态组件中进行函数分配。只要让它们超出范围并通过道具，这是一个非常大的性能差异。

我想知道这是不是我的组件：

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')
);

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

【问题讨论】：

这意味着你不应该在你的 stateles 组件函数中声明函数，因为这些函数将在每次渲染时创建。你应该在 props 处传递它们
你能给我一个例子或者发个链接让我看看
回答错误的代码示例

标签： javascript reactjs

【解决方案1】：

只需将它们作为道具传递。

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')
);

【讨论】：

正是我需要的

【解决方案2】：

不要这样做：

const Component = (props) => {
    const getSomeResult = () => "it will be created at every render, you should pass this function in props";

    return <p>{getSomeResult()}</p>
}

【讨论】：