React基础篇 （1）-- render&components

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

render

基础用法

//1、创建虚拟DOM元素对象
var vDom=<h1>hello wold!</h1>
//2、渲染
ReactDOM.render(vDom,document.getElementById('box'))


react的API写法

var ele=React.createElement('h2',{id:'box1'},"设置id")
ReactDOM.render(ele,document.getElementById(('jsx1')))


加入动态数据的渲染

const id="box2";
const name="adoctors";
const age=18;
//动态的数据加{变量}
var vDom2=<h1 id={id}>name:{name},age:{age}</h1>
ReactDOM.render(vDom2,document.getElementById(('jsx2')))


列表渲染

错误做法：


const arr=["jquery","zepto","vue","angular","react","nodejs","php"]
var vDom3=<ul>
<li>{arr}</li>
</ul>
ReactDOM.render(vDom3,document.getElementById(('list')))
//结果
<ul>
<li>jqueryzeptovueangularreactnodejsphp</li>
</ul>


正确做法：使用map方法,无key是容易警告

var vDom3=<ul>
{arr.map((item,i)=><li key={i}>{item}</li>)}
</ul>
ReactDOM.render(vDom3,document.getElementById(('list')))


components

组件一般分为两种：

第一种：工厂函数组件（也称：简单组件，即没有状态的组件）

//1、定义组件
function Myconponent(){
return <h1>我是简单组件</h1>
}
//2、渲染组件标签
ReactDOM.render(<Myconponent />,document.getElementById(('com1')))


第二种：es6类组件（也称：复杂组件）

//1、定义组件
class Myconponent2 extends React.Component{
render(){
console.log(this) //Myconponent2实例对象
return <h1>我是复杂组件</h1>
}
}
//2、渲染组件标签
ReactDOM.render(<Myconponent2 />,document.getElementById(('com2')))


React基础篇 （1）-- render&components的更多相关文章

1. react基础篇四

   列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li& ...

2. [react 基础篇]——React.createClass(）方法同时创建多个组件类

   react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组 ...

3. react基础篇五

   再看JSX 本质上来讲,JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖.比如下面的代码: <MyButto ...

4. react 基础篇 #2 create-react-app

   1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以 ...

5. react基础篇入门组件

   讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4. ...

6. React基础篇 - 02.JSX 简介

   JSX 简介 请观察下面的变量声明: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML ...

7. React基础篇 （3）-- 生命周期

   生命周期是react中的重要部分,理解它有助于我们更合理的书写逻辑. 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移 ...

8. React基础篇（2） -- state&props&refs

   内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...

9. react基础篇六

   创建 Refs 使用 React.createRef() 创建 refs,通过 ref 属性来获得 React 元素.当构造组件时,refs 通常被赋值给实例的一个属性,这样你可以在组件中任意一处使用 ...

随机推荐

1. cookie单点登录（跨域访问）

   新近一家公司上来就让做oa,要求嵌入公司现有系统模块,自然而然想到模拟post单点登录对方系统新建单点登陆页面保存session,然现有系统都有用cookie保存用户信息,故保存本地cookie……测 ...

2. DBCC CHECKDB

   DBCC CHECKDB 算是管理员们最常用的命令也是必须要知道的命令了.定期的检查及问题的修复都是比较重要的!!下面介绍一下 DBCC CHECKDB 的一些基本用法. DBCC CHECKDB 完 ...

3. linux信号处理时机

   信号号称所谓软中断,事实上,还是没有真正的硬件中断那样能随时改变cpu的执行流 硬件中断之所以能一发生就得到处理是因为处理器在每个指令周期的结尾都会去检查中断,这种粒度是很细的 但是信号的实现只是在进 ...

4. windows ftp 连接serv_U 管理员

   连接工具名称:8uftp 小技巧:活动模式连接

5. 【题解】【矩阵】【回溯】【Leetcode】Rotate Image

   You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

6. 【BZOJ】【1040】【ZJOI2008】骑士

   树形DP/基环树DP 我掉坑掉了好多…… 这题图比较特殊,每个连通块都是一棵基环树(我一开始以为图是连通的了……sigh,我说为什么网上的题解都要累加ans……),那么对于一棵基环树,我们先dfs找到 ...

7. nodejs的require模块及路径

   在nodejs中,模块大概可以分为核心模块和文件模块. 核心模块是被编译成二进制代码,引用的时候只需require表示符即可,如(require('net')). 文件模块,则是指js文件.json文 ...

8. android 应用开发对大图片的处理

   一,下载 android下载大图片(例如微博长图片)会出现OOM down掉问题 解决这个问题的办法是下载图片时先得到图片的宽度和高度,如果超出规定限制则对图片进行缩放 关键参数 1. BitmapF ...

9. js 小练习之indexOf

   闲来无事~ 写点小练习 function zz(arr, item) { var a=arr.join("") var b=a.indexOf(item) alert(b) } z ...

10. ztree实现中国省市区树形，可多选

    首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMME ...