zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Linux 文件权限
    Linux 查看磁盘使用情况
    绑定到外部验证服务LDAP、配置 autofs
    创建逻辑卷
    查找一个字符串
    查找用户目录下的指定文件
    配置NTP时间服务器
    通过Roslyn构建自己的C#脚本(更新版)(转)
    Elon Musk
    可能改变世界的13个“终结”(上)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5642209.html
Copyright © 2011-2022 走看看