[React] Creating a Stateless Functional Component-白红宇

[React] Creating a Stateless Functional Component

阅读量：4319 次

发布时间：2019-06-06

本文共 1642 字，大约阅读时间需要 5 分钟。

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 (      {
   this.props.value}
    )  }}class App extends React.Component {  render(){    return (          )  }}ReactDOM.render(  
     ,  document.querySelector("#root"))

Conver Title component to stateless component:

const Title =  (props) => (  {props.value}
)class App extends React.Component {  render(){    return (          )  }}ReactDOM.render(  
     ,  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 (      {this.props.value}
    )  }}*/const Title =  (props) => (  {props.value}
)Title.propTypes = {  value: React.PropTypes.string.isRequired}Title.defaultProps = {  value: "Egghead.io is Awson!!"}class App extends React.Component {  render(){    return (          )  }}ReactDOM.render(  
     ,  document.querySelector("#root"))

Statless compoennt rendering much fast than extends one.

转载于:https://www.cnblogs.com/Answer1215/p/5642209.html

你可能感兴趣的文章

{ this.props.value}

{props.value}

{this.props.value}

{props.value}

{
this.props.value}