[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.
最新文章
- [BZOJ1232][[Usaco2008Nov]安慰奶牛cheer(MST)
- ssh scp ssh-copy-id 非22端口的操作方法
- mysql中datetime比较大小问题 (转的)
- HTML:表格与表单
- Ubuntu根目录下各文件的功能介绍
- CSS选择器,标签限定
- PL/SQL拼接和使用绑定变量
- IIS7.5(IIS7)配置伪静态urlrewrite
- MZL&#39;s xor
- DB2导入导出 学习笔记
- 深入理解JNI
- js实现按钮开关.单机下拉菜单
- python 获取gearbest地址库代码
- python的类
- async await promise 执行时序
- python 利用urllib 获取办公区公网Ip
- [Algorithm] Tree: Lowest Common Ancestor
- animate.css动画种类
- 撩课-Java每天5道面试题第22天
- libuv移植到ios
热门文章
- loadrunner throughput(吞吐量)理解
- easyui源码翻译1.32---ProgressBar(进度条)
- spin_lock &; mutex_lock的区别?
- Java多态的体现之接口
- yiic 数据库迁移工具
- 【HDOJ】1238 Substrings
- Oracle Developer Form中Block的重新查询
- poj3280Cheapest Palindrome(记忆化)
- 软件介绍(apache lighttpd nginx)
- 使用Arcglobe 10与3dmax建立三维城市