• [React] Creating a Stateless Functional Component


    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")
    )

    Statless compoennt rendering much fast than extends one.

  • 相关阅读:
    postman的使用方法详解!最全面的教程
    免费使用的加速器
    Windows添加启动项的两种方法
    Python版本微信跳一跳,软件配置
    Inno Setup教程
    Go开发环境安装配置
    Linux下安装Phantomjs
    Python的url解析库--urlparse
    Python处理HTML转义字符
    Python使用base64编码的问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5642209.html
Copyright © 2020-2023  润新知