Question

我正在努力学习反应，我有一些不确定因素。我正在引用反应DOCS和其他一些教程，我看到函数写在渲染函数内部，也在类内部。我们应该在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>

        )

    }
}

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

感谢。

Answer 1

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

这是一个例子。在你的组件中说你有一个＆＃34;用户＆＃34;应该显示用户列表的道具。你可能有这些类型的渲染函数：

＆＃13;

F12

＆＃13;

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

Answer 2

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

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

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

函数内部的render和class in reactjs

2 个答案: