react,使用扩展类创建组件和简单的 const = 函数之间的差异

IT技术 reactjs
2021-05-13 07:20:32

在react教程中:

https://egghead.io/lessons/javascript-redux-react-todo-list-example-filtering-todos

有主要组件创建扩展:

class TodoApp extends Component {
  render() {
    const visibleTodos = getVisibleTodos(
      this.props.todos,
      this.props.visibilityFilter
    );
    .
    . // Input and Button stuff
    .

另一个组件就像一个包含函数的 const 一样创建:

const FilterLink = ({
  filter,
  children
}) => {
  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         store.dispatch({
           type: 'SET_VISIBILITY_FILTER',
           filter
         });
       }}
    >
      {children}
    </a>
  )
}

我看到的区别,首先使用类创建使用渲染函数,另一个使用返回函数发回模板。

有什么区别?我听说将来只有扩展组件才允许使用组件?

2个回答

请参阅:React.createClass 与 ES6 箭头函数

简短的回答是,您希望尽可能多地使用无状态功能组件 (SFC);您的大部分组件应该是 SFC 的。

在以下情况下使用传统Component类:

  • 您需要本地状态 ( this.setState)
  • 你需要一个生命周期挂钩(componentWillMountcomponentDidUpdate,等)
  • 您需要通过 refs 访问支持实例(例如<div ref={elem => this.elem = elem}>

class Foo extends Component {} 导致组件带有一些 React 生命周期钩子,而 const Foo = (props) => {} 没有。因此,后者应该会产生更高性能的代码,并且会被视为“无状态”或“纯”组件,因为它没有任何额外的负担。