[React] Creating a Stateless Functional Component

最新推荐文章于 2023-04-14 17:44:39 发布

转载最新推荐文章于 2023-04-14 17:44:39 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5642209.html

文章标签：

#javascript #ViewUI

本文介绍如何将React中的类组件转换为无状态函数组件，并演示了如何定义无状态函数组件及集成如PropTypes验证等React特性。

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

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

Compnents with State:

class Title extends React.Component {
  render(){
    return (
      <h1>{this.props.value}</h1>
    )
  }
}

class App extends React.Component {
  render(){
    return (
      <Title value="Hello World!" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector("#root")
)

Conver Title component to stateless component:

const Title =  (props) => (
  <h1>{props.value}</h1>
)

class App extends React.Component {
  render(){
    return (
      <Title value="Hello World!" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector("#root")
)

So now you cannot access lifecycle hooks, anyway a dump compoennt doesn't need to handle those lifecycle hooks.

But if you want to set defaultProps and propTypes, it is still possible:

/*class Title extends React.Component {
  render(){
    return (
      <h1>{this.props.value}</h1>
    )
  }
}
*/
const Title =  (props) => (
  <h1>{props.value}</h1>
)
Title.propTypes = {
  value: React.PropTypes.string.isRequired
}
Title.defaultProps = {
  value: "Egghead.io is Awson!!"
}

class App extends React.Component {
  render(){
    return (
      <Title value="Hello World!" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector("#root")
)