[React] Creating a Stateless Functional Component
2016-07-05 03:29
417 查看
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:
Conver Title component to stateless component:
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:
Statless compoennt rendering much fast than extends one.
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.
相关文章推荐
- 1. react-native-ios之----20分钟搭建环境
- React的设计哲学 - 简单之美
- react 入门实例教程
- ES6 for React
- Angular和React的对比
- typeScript.webpack&react的正确版quickStart
- 走进ReactiveCocoa的世界
- ReactiveCocoa自述:工作原理和应用
- 轻松入门React和Webpack
- 使用yeoman快速搭建react-webpack开发环境
- React-Native 与 Android 集成 <一、环境搭建>
- React Native入门教程 3 -- Flex布局
- React Native入门教程 3 -- Flex布局
- iOS 开发之 ReactiveCocoa(进阶)
- iOS 开发之 ReactiveCocoa(基础)
- React-Native学习指南
- react做tab切换的几种方式
- React Native之Android Tabbar的实现.
- React Native学习笔记(五)Redux基础学习
- react native 错误:Make sure you have an Android emulator running or a device connected and have set up