[React] Public Class Fields with React Components

最新推荐文章于 2023-10-29 16:23:36 发布

转载最新推荐文章于 2023-10-29 16:23:36 发布 · 136 阅读

文章标签：

#javascript #ViewUI

本文探讨了在React中使用Public Class Fields简化组件属性赋值和状态初始化的方法。通过实例展示了如何利用箭头函数和直接状态赋值来避免不必要的构造函数使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

Handle function:

// Better
handleClick = () => {
    ...
}

// Not good
constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
   ...  
}

Handle State:

// Better
state = {count: 0}

// Not good
constructor() {
    super();
    this.state = {count: 0};
}

Using puiblic field, we can actually remove 'constructor' because it is no longer necessary.

class App extends React.Component {
  state = {clicks: 6}

  handleClick = () => {
    this.setState(prevState => {
      return {clicks: prevState.clicks + 1}
    })
  }

  render() {
    return (
      <div>
        <div>
          Click Count: {this.state.clicks}
        </div>
        <button
          onClick={this.handleClick}
        >
          Click Me!
        </button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)