Question

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

如何访问此文件外的功能？我应该使用哪个属性？

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

Answer 2

不要这样做：

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

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

反应和无状态组件

2 个答案: