React.js。在函数体中创建带参数（和道具将是参数）或引用道具的方法更好吗？

Posted 2021-03-27

考虑以下示例：

import React, { Component } from 'react';

class Todos extends Component {

  renderList = (listArray) => { // our todos are function argument
    return listArray.map(listItem => (
      <li>listItem</li>
    ))
  };

  render() {
    const { todos } = this.props;
    return (
      <div className="container">
        renderList(todos);
      </div>
    ); 
  }
}

export default Todos;

第二个例子：

import React, { Component } from 'react';

class Todos extends Component {

  renderList = () => { // but in this example we are explicitly reference to this.props 
    const { todos } = this.props;
    return todos.map(listItem => (
      <li>listItem</li>
    ))
  };

  render() {
    return (
      <div className="container">
        renderList();
      </div>
    ); 
  }
}

export default Todos;

我永远无法决定哪种风格更好。我试着在网上搜索，但这似乎是一种罕见的困境。所以我的问题是 - 在函数体中创建带参数（和道具将是参数）或引用道具的方法更好吗？有什么真正的区别吗？你有什么偏好？

答案

作为一般规则，由于可测试性，我总是倾向于将所需的参数传递给我的方法而不是使用类范围。 假设你想稍后测试这个方法，你可以传递你想要的参数，这样就更容易和更简洁，而不必为你的类设置正确的变量（或者你的方法定义的范围是什么） 。

这是回答你的问题，但在你上面写的例子中，我还会考虑创建一个子组件来封装你的列表项。

希望这可以帮助！