React 组件风格（继承 VS 函数式）讨论

#1

react-starter-kit 修改了 react 代码风格，其中修改了建议的 react 组件方式：

Prefer using functional components

  • Prefer using stateless functional components whenever possible.
    Components that don’t use state are better to be written as simple pure functions.
// Bad
class Navigation extends Component {
  static propTypes = { items: PropTypes.array.isRequired };
  render() {
    return <nav><ul>{this.props.items.map(x => <li>{x.text}</li>}</ul></nav>;
  }
}

// Better
function Navigation({ items }) {
  return (
    <nav><ul>{items.map(x => <li>{x.text}</li>}</ul></nav>;
  );
}
Navigation.propTypes = { items: PropTypes.array.isRequired };

那么，元芳你怎么看？

#2

继承， 有种熟悉的感觉

#3

有什麼差別，導致一個Bad一個Better

#4

既然用了 es6 语法为什么不这样写？

const Navigation = ({
  items
}) => (
  <nav>
    <ul>{items.map(x => <li>{x.text}</li>}</ul>
  </nav>;
);
#5

组件没有内部状态是一个重要信息，用函数写法可以把这个信息清晰的表达出来（给其他程序员或者编译器看）

这不是两种风格的vs，只是推荐的表达方式。

1 Like
#6

示例里的 bad ，是基于「继承后只实现了一个 render 方法」。此时， stateless component 写法才是 better。

并不是说 extends React.Compoennt 就是不好的。

1 Like
#7

是的，准确来说是针对函数式风格组件的建议

1 Like
#8

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

官网文档有上面这句话。看后半段，意思是将来可以特别针对functional components作性能上的优化。

#9

component是未来

#10

写习惯了继承的方式，不过函数式优势明显

#11

用不用箭头函数，绑定的 this 是不一样的，虽然并没有什么卵用……可能就是没差别吧。

#12

函数式还是看着亲切

#13

假如我完全不懂react

function Navigation({ items }) {
  return (
    <nav><ul>{items.map(x => <li>{x.text}</li>}</ul></nav>;
  );
}
Navigation.propTypes = { items: PropTypes.array.isRequired };

这样的写法我比较容易理解。

不过假如上面这个组件需要增加一些事件的时候，那不是又要改成继承的方式去写？