函数内部的render和class in reactjs

Question

我正在努力学习反应,我有一些不确定性.我正在引用反应DOCS和其他一些教程,我看到函数写在渲染函数内部,也在类内部.我们应该在渲染函数内做什么反应？

第一路

class App extends Component {

    test(user) {

        return user.firstName;
    }

    render() {

        const user = {
            firstName: 'Harper',
            lastName: 'Perez'
        };

        return (

            <div>

                <h1>{this.test(user)}</h1>

            </div>
        )
    }
}

第二种方式

class App extends Component {

       render() {

        const user = {
            firstName: 'Harper',
            lastName: 'Perez'
        };

        function test(user) {

            return user.firstName;
        }

        return (

            <div>

                <h1>{test(user)}</h1>

            </div>

        )

    }
}

这两种方法都有效.但我想知道这样做的最佳方法是什么？最重要的是,我想知道我在渲染功能中可以做什么样的事情.

谢谢.

Answer 1

我认为这最终是你的选择,但我个人更喜欢只在渲染中放置渲染组件和/或JSX的函数(即在prop上映射,有条件地加载基于prop的正确组件的switch语句等等... ).如果函数背后的逻辑很重,我会将它从渲染中删除.

这是一个例子.在你的组件中说你有一个"用户"道具应该显示一个用户列表.你可能有这些类型的渲染函数:

render(){
  
  // An array of user objects & a status string.
  const { users, status } = this.props;
  
  // Map users array to render your children:
  const renderUserList = () => {
    return users.map(user => {
      return <div>{ user.firstName }</div>;
    });
  };
  
  // Conditionally load a component:
  const renderStatus = () => {
    let component = '';
    switch(status){
      case 'loading':
        component = <Component1 />
        break;
      case 'error':
        component = <Component2 />
        break;
      case 'success':
        component = <Component3 />
        break;
      default:
        break;
    }
    
    return component;
  }
  
  // render() return:
  return(
    <div>
      <div className="status">
        { renderStatus() }
      </div>
      <div className="user-list">
        { renderUserList() }
      </div>
    </div>
  );
}

但是,如果您有一个需要以某种方式操纵用户数据的函数,那么将它放在render之外的函数中可能会更好.

Answer 2

渲染方法通常被调用很多次.我认为如果可以的话,在render方法之外声明你的函数会更高效.有关render方法的更详细说明,请参阅此答案.由于您的示例是纯函数,您还可以将其声明为const完全类的上下文.

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
}
const test = function(user) {
    return user.firstName;
}

const App = () => (
  <div>
    <h1>hello {test(user)}</h1>
  </div>
)