一.创建组件

在React中有两种创建组件的方式,分别是函数形式的组件和类形式的组件

//函数形式:
function Welcome(props){
return <p>this is a page,{props.name}!</p>
}
//类形式
class Welcome extend React.Component{
render(){
return <p>this is a page,{{this.props.name}}!</p>
}
}

在下面都是以函数形式的组件为例

在页面中显示自定义组件

const element = <Welcome name='li'/>
ReactDOM.render(
element,
document.getElementById('root')
);

执行这段代码在页面中会显示:this is a page ,li!

解释上述代码:

1.将<Welcome name='li'/>作为ReactDOM.render()的第一个参数

2.React将{name:'li'}作为props去调用Welcome组件

3.Welcome组件返回<p>this is a page,li!</p>

 4.更新DOM

通常自定义的组件已大写字母开头,组件只能返回一个根节点
可以在一个组件中引入其他组件
组件不能修改它的props

React——组件的更多相关文章

  1. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  2. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  3. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  4. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  7. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  8. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  9. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  10. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

随机推荐

  1. gitlab+jenkins持续集成(一)

    1. 环境:CentOS7.0,jdk-8u91-linux-x64.rpm,jenkins 2.7.4 ,gitlab 9.2.2 2.    安装jdk,jenkins     (rpm -ivh ...

  2. Bat脚本自动卸载软件-静默执行

    通过Bat脚本卸载软件,原理是得到某软件的ProductCode,然后通过MsiExec.exe命令卸载软件,下面是卸载一个产品的基本代码示例: set ML4.0HF4Name=Product4.0 ...

  3. HDU 3625 Examining the Rooms:第一类stirling数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3625 题意: 有n个房间,每个房间里放着一把钥匙,对应能开1到n号房间的门. 除了1号门,你可以踹开任 ...

  4. 计蒜客模拟赛D1T2 蒜头君的树:树上节点之间最短距离和

    题目链接:https://nanti.jisuanke.com/t/16446 题意: 给你一棵有n个节点的树以及每条边的长度,输出树上节点之间的最短距离和.然后进行m次操作,每次操作更改一条边的长度 ...

  5. iOS的阴影绘制及性能优化

    今天来讲讲iOS开发过程中的阴影绘制及其潜在的绘图性能问题.虽然在开发过程中,我们使用阴影功能的机会不是很多,但是如果用了,有可能引起如卡顿等性能问题,所以,还是有必要来探究一下阴影的绘制过程,及如何 ...

  6. Spring框架解析

    在生活中我们会有很多依赖关系,我要写一个笔记,就要有本子,笔,两种物品,还有当事人我,一共三个对象. 1.本子:可以再上面写字,这是他是属性,可被书画: 2.笔:可以在很多东西上写写画画:这也是他的属 ...

  7. servlet以及HTML中路径问题

    路径问题: ①相对路径和绝对路径: 绝对路径:绝对路径是以/开头的路径! 相对于当前服务器的绝对路径:如果是服务器解析,那么/就代表当前服务器的绝对路径:http://localhost:8080 相 ...

  8. destoon源码分析一

    #0x01 先记录一些之前模糊的小知识点,补充一下 set_magic_quotes_runtime() -- 设置magic_quotes_runtime配置激活状态(php 5.3 被弃用,php ...

  9. 关于Java String 类型转换时null的问题(转)

    关于Java String 类型转换时null的问题 开发中经常遇到从集合类List.Map中取出数据转换为String的问题,这里如果处理不好,经常会遇到空指针异常java.lang.NullPoi ...

  10. 【Ubuntu 16】启动Eclipse Indigo报错 error code1 jdk没有配置好

    在/etc/profile下配置好JAVA_HOME CLASSPATH PATH 这些变量后 eclipse启动jvm并不能直接按照这些变量来启动 需要使用命令 update-alternative ...