[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.

[React] Creating a Stateless Functional Component