在 render() 中反应函数答案

【问题标题】：React functions inside render()在 render() 中反应函数
【发布时间】：2017-05-13 03:56:57
【问题描述】：

对于在反应组件中放置函数的位置是否有偏好。我仍在学习反应，所以只是想找出最佳实践。

class Content extends React.Component {
    /// Whats the difference between putting functions here such as 
   Hello(){

   }

  render(){
      /// or here
   Hello(){

   }


    return()(
      <div>blah blah </div>

    )

    }


  }

【问题讨论】：

标签： reactjs components

【解决方案1】：

值得指出的是，有时您希望在 render() 中执行密集计算并承受性能损失。特别是当它涉及从道具进行计算时。以

为例

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.firstName + props.lastName,
    };
  }

  render() {
    return <div> {this.state.name} </div>;
  }
}

现在当 props 改变时，状态不会更新，因为构造函数只在组件挂载时运行。更好的方法是在渲染中进行计算。因此，每当您的组件重新呈现时，它都会重新计算并呈现正确的值。

class Person extends React.Component {
  render() {
    const myName = this.props.firstName + this.props.lastName;

    return <div> {myName} </div>;
  }
}

而且这个版本读起来更简洁：

class Person extends React.Component {
  calculateName = () => {
    return this.props.firstName + this.props.lastName;
  }

  render() {
    const myName = this.calculateName();

    return <div> {myName} </div>;
  }
}

【讨论】：

难道不是另一种方法是使用 componentWillRecieveProps() 方法来更新状态吗？
有点。 Cwrp 为 1。在 react 16+ 和 2 中已弃用。cwrp 在初始渲染时不会被触发。在渲染中运行计算确保它在渲染上运行。

【解决方案2】：

每次渲染都会在渲染方法中创建一个函数，这会对性能造成轻微影响。如果将它们放在渲染中也会很混乱，这是一个更大的原因，您不必滚动渲染中的代码来查看 html 输出。总是把它们放在课堂上。

对于无状态组件，最好将函数保留在 main 函数之外并传入 props，否则每次渲染也会创建函数。我没有测试过性能，所以我不知道这是否是一个微优化，但值得注意。

例子：

const MyStatelessComponent = ({randomProp}) => (
    render() {
        doSomething(randomProp);

        return <div />
    }
);

doSomething = (randomProp) => {
    //Do something here
}

【讨论】：

我在我的项目中也是这样做的