React 新手 - 我如何着手修复/改进这个组件？

Posted 2023-02-23

【中文标题】React 新手 - 我如何着手修复/改进这个组件？

【英文标题】：New to React - How do I go about fixing/improving this component?

【发布时间】：2020-05-22 17:15:32

【问题描述】：

我是 React 框架的新手，最近编写了以下代码，但有人要求我了解它有什么问题以及如何改进/修复这个组件。

请有人建议一种更好的方式来构建这个组件，为什么要采用这种方法？谢谢！

class App extends React.Component   
  constructor(props) 
    super(props);
    this.state = 
      name: this.props.name || 'Anonymous'
    
      
  render() 
    return (
      <p>Hello this.state.name</p>
    );  
  

【问题讨论】：

这篇文章可能有助于解释这里发生了什么 - medium.com/@justintulk/…

【参考方案1】：

除非name 应该在某个时候更改，否则您的组件不需要是有状态的。只需使用name 属性，并使用defaultProps 提供默认值：

class App extends React.Component   
  render() 
    return (
      <p>Hello this.props.name</p>
    )
  

App.defaultProps = name: 'Anonymous'

对于这么简单的组件，其实不需要使用类：

function App() 
  return (
    <p>Hello this.props.name</p>
  )

App.defaultProps = name: 'Anonymous'

请参阅Function and Class Components 部分了解有关函数式组件与类组件的更多信息。

【参考方案2】：

国家的建设不能那样做。你必须使用 componentDidMount() 和 setState()，

componentDidMount() 
 this.setState(
   name: this.props.name
 );

【参考方案3】：

您是否从输入中接收到一些内容，或者您​​只是想显示这种状态？如果你只想显示这个状态，你可以用 state = name: 'Anonimus' 改变构造器块，然后像你一样在你的 jsx 中调用它。