reactjs中渲染和类中的函数

IT技术 javascript reactjs
2021-04-21 18:54:58

我正在尝试学习 reactjs，但我有一些不确定性。我指的是 react DOCS 和其他一些教程，我看到函数是在渲染函数和类中编写的。在react中我们应该在render函数内部做什么？

第一种方式

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>

        )

    }
}

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

谢谢。

2个回答

render 方法通常会被调用很多次。我认为如果可以的话，在 render 方法之外声明你的函数会更高效。有关渲染方法的更详细说明，请参阅此答案。

您示例中的 test 函数是一个纯函数，这允许您完全在 react 组件的范围/上下文之外声明它，因为它只需要访问传入的参数。

也就是说，在渲染方法中声明函数或者现在更常见的函数组件是完全没问题的。有像useCallback这样的钩子可以帮助提高性能，但在 99% 的情况下这不是问题。永远记住，过早的性能优化是万恶之源，您需要先衡量性能，然后才能改进它。

// helpers.js
const test = function(user) {
    return user.firstName;
}

// App.js
const App = () => {
  const user = {
    firstName: 'Harper',
    lastName: 'Perez'
  }

  return (
    <div>
      <h1>hello {test(user)}</h1>
    </div>
  )
}
@MartinMazzaDawson 正如我在回答中提到的，因为 OP 使用的是纯函数，所以可以将其放置在类的上下文之外，这样更可重用，并且可以更好地分离关注点。
2021-05-23 18:54:58
他们在这里在课堂之外宣布是没有意义的。您可以将函数附加到类中，这样您就不必传入参数。这样做的唯一原因是您使用的是纯函数。
2021-05-30 18:54:58
您能否澄清一下，作为纯函数的示例具体是什么使它能够放置在类的上下文之外？换一种方式问，当函数不能放置在类的上下文之外时，会是什么例子？
2021-05-30 18:54:58
您可以在组件之外放置一个不纯的函数，它可能会工作得很好。在组件内部声明的原因是更容易使用内部 props 和 hooks。如果我们谈论的是类，那么您将拥有类的方法，以便稍后使用它们，并且还可以访问类中的私有变量。
2021-06-13 18:54:58

我认为这最终是你的选择，但我个人更喜欢只在渲染中放置专门处理渲染组件和/或 JSX 的函数（即映射到 prop、基于 prop 有条件地加载适当组件的 switch 语句等...... ）。如果函数背后的逻辑很重，我会把它排除在渲染之外。

这是一个例子。假设在您的组件中您有一个“用户”props，它应该显示用户列表。您可能有具有以下类型的渲染功能：

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

但是，如果您有一个函数需要以某种方式操作有关用户的数据，最好将其放在渲染之外的函数中。

其它你可能感兴趣的问题
上一篇如何处理循环中的引用？ 下一篇无法读取未定义的属性“字符串” | React.PropTypes | LayoutPropTypes.js