reactjs中render和类中的函数

Question

我正在努力学习reactjs，我有一些不确定性。我参考了react文档和一些其他教程，我看到函数是在渲染函数和类中编写的。我们应该在React的render函数中做什么？

第1路

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

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

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

也就是说，在render方法中声明函数或者现在更常见的是在函数组件中声明函数是完全可以的。有一些钩子，比如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>
  )
}