创建React组件
组件概述
组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
提取组件一开始看起来像是一项单调乏味的工作,但是在大型应用中,构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次,或者其自身就足够复杂,类似这些都是抽象成一个可复用组件的绝佳选择,这也是一个比较好的做法。
组件定义
1 函数定义组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
2 类定义组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
3 createElement
语法
React.createElement(
type,
[props],
[...children]
)
代码
const title = React.createElement(
'div',
{sport:'football'},
[
<div key="program">天下足球</div>,
<div key="comment">留给中国队的时间不多了</div>
]
);
ReactDOM.render(title,document.getElementById('root'));
说明
1 所有的React组件必须像纯函数那样使用它们的props。
props是只读的。无论是使用函数或是类来声明一个组件,它决不能修改它自己的props,否则会抛异常。
2 使用类定义组件,可以使用组件的其它特性:局部状态(state属性)、生命周期钩子等。
创建React组件的更多相关文章
- 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具
用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...
- webStrom快捷键快速创建React组件
1. rcc + tab键 - - 用ES6模块系统创建一个React组件类 2. rccp + tab键 - - 创建一个带有PropTypes和ES6模块系统的React组件类 3. rcfc + ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
- 总结 React 组件的三种写法 及最佳实践 [涨经验]
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...
- [目前最火的前端开发框架]React组件的应用分析
React组件 一.如何创建React组件 方式一:React.createClass 用 React.createClass 构建组件是 React 最传统.也是兼容最好的方法. const But ...
- 总结 React 组件的三种写法 及最佳实践
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普 ...
- react组件的创建
最近项目接触react和rn,之前会一些vue和小程序,起初写react是很难受的,尤其是jsx的写法,不过2周过后感觉写起来有点舒服了... 目前react的组件一共有3种方式:React.crea ...
- React: React组件创建的三种方式
一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...
- 二、React初体验之React组件创建
(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...
随机推荐
- php7内核执行流程(转载留记录)
- git 合并多个commit
1,查看提交历史,git log 首先你要知道自己想合并的是哪几个提交,可以使用git log命令来查看提交历史,假如最近4条历史如下: commit 3ca6ec340edc66df13423f36 ...
- linux 内核假死循环导致的问题
[, comm: -IFileSender Tainted: G B ENX -- ZTE Grantley/S1008 [:[<ffffffff810fb2cb>] [<fffff ...
- Easy-to-Learn English Travel Phrases and Vocabulary!
Easy-to-Learn English Travel Phrases and Vocabulary! Share Tweet Share Tagged With: Real Life Englis ...
- 高并发架构技术|缓存失效、缓存穿透问题 PHP 代码解决
问题描述 缓存失效: 引起这个原因的主要因素是高并发下,我们一般设定一个缓存的过期时间时,可能有一些会设置5分钟啊,10分钟这些:并发很高时可能会出在某一个时间同时生成了很多的缓存,并且过期时间在同一 ...
- qurtz.net
Quartz.NET的使用(附源码)(作者 陈珙) 简介 虽然Quartz.NET被园子里的大神们写烂了,自己还是整理了一篇,结尾会附上源码地址. Quartz.NET是一款功能齐全的开源作业调度 ...
- [C语言]使用函数
------------------------------------------------------------------------------------------ //函数原型声明: ...
- JAVA仿百度分页
最近在做一个仿百度网盘的网页小应用,找到了一个优雅简洁的分页插件,和百度搜索的分页很相似,对他进行了二次封装,拿出来跟大家分享下 插件源码 /** * This jQuery plugin displ ...
- iOS修改状态栏颜色
application.statusBarStyle = .LightContent // 在APPlication中设置全局状态栏颜色,为白色 application.statusBarHidden ...
- 学Android开发的人可以去的几个网站
学Android开发的人可以去的几个网站 1.<IT蓝豹>Android开源项目分享平台国内非常好的一个Android开发者分享站,分享android所有特效,每天都有最新的Android ...