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.

  • 相关阅读:
    javaweb毕业设计
    Maven入门----MyEclipse创建maven项目(二)
    Maven入门----介绍及环境搭建(一)
    SpringMvc入门五----文件上传
    SpringMvc入门四----rest风格Url
    SpringMvc入门三----控制器
    SpringMvc入门二----HelloWorld
    SpringMvc入门一----介绍
    分析setup/hold电气特性从D触发器内部结构角度
    33. Search in Rotated Sorted Array
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5642209.html
Copyright © 2011-2022 走看看