一、列表渲染

①在列表中,绑定数组成员会直接把成员渲染

    <div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const fruits =[
<li key='one'>apple</li>,
<li key='two'>orange</li>,
<li key='three'>banana</li>,
]
const element = (
<div>
<ul>{fruits}</ul>
</div>
)
ReactDOM.render(element,document.getElementById('app'))
</script>

②当数组成员是对象时,可以直接在标签中生成一个数组

    <div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const todos = [
{id:1,name:'eric'},
{id:2,name:'marry'},
{id:3,name:'jack'},
{id:4,name:'lisa'},
] const element = (
<div>
<ul>
{
todos.map(item => {
return <li key={item.id}>{item.name}</li>
})
}
</ul>
</div>
)
ReactDOM.render(element,document.getElementById('app'))
</script>

二、条件渲染

    <div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const user ={
name:'eric',
}
function getHi(user) {
if (user) {
return <h1>hello {user.name}</h1>
}
return <h1>hello world</h1>
}
const element = getHi(user)
//const element = getHi()
ReactDOM.render(element,document.getElementById('app'))
</script>

三、事件处理

    <div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
function handleClick() {
window.alert('hello')
}
// 事件使用驼峰命名
// 必须绑定一个函数,行数体不能写在行内,也可以直接绑定一个匿名函数
// 不能使用字符串的方式,一定要用{函数}来绑定
const element = (
<div>
<button onClick={handleClick}>点击1</button>
<button onClick={()=>{alert('world')}}>点击2</button>
</div>
) ReactDOM.render(element,document.getElementById('app'))
</script>

React渲染和事件处理的更多相关文章

  1. React中的事件处理为什么要bind this?

    个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...

  2. react 渲染

    目录 React渲染 createElement的三个参数 element如何生成真实节点 ReactDOMComponent 作用 ReactCompositeComponentWrapper 作用 ...

  3. react初探(一)之JSX、状态(state)管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  4. 七天接手react项目 —— state&事件处理&ref

    state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...

  5. React渲染问题研究以及Immutable的应用

    写在前面 这里主要介绍自己在React开发中的一些总结,关于react的渲染问题的一点研究. 另外本人一直希望在React项目中尝试使用,因此在之前已经介绍过immutable的API,可以参看这里I ...

  6. Vue 系列之 渲染与事件处理

    渲染相关 列表渲染 与 条件渲染 Vue 中的常见的渲染有 列表渲染 和 条件渲染 所谓条件渲染,则是通过添加一定的逻辑条件来进行 Dom 元素的操作 v-if v-else v-else-if &l ...

  7. 你所要掌握的最简单基础的React渲染优化

    一.React的渲染机制 要掌握一两项React-render优化的方法不难,但是非常重要.无论是在实际项目中的一个小细节,还是迎合'面试官'的口味 1.1 触发Render 我们知道React要更新 ...

  8. react渲染原理深度解析

    https://mp.weixin.qq.com/s/aM-SkTsQrgruuf5wy3xVmQ   原文件地址 [第1392期]React从渲染原理到性能优化(二)-- 更新渲染 黄琼 前端早读课 ...

  9. react渲染和diff算法

    1.生成虚拟dom createElement的作用就是生成虚拟dom.虚拟dom到底是个啥,其实它就是个javascript对象~,这个对象的属性有props,vType,type, 而props也 ...

随机推荐

  1. Java学习:Map接口

    Map集合 Collection接口: 定义了单列集合规范 Collection<E> 每次存储一个元素 单个元素 Map接口:定义了双列集合的规范 Map<K,V> 每次存储 ...

  2. IP地址和MAC地址绑定的必要性

    计算机网络是一个共通的网络,世界上任何计算机都可以互相访问. 实现的原理基于网络通讯的互联网交互五层模型. 计算机网络的历史发展 当计算机网络技术初始利用的时代,几台计算机通过集线器连接,就可以实现网 ...

  3. ClassPathBeanDefinitionScanner 说明

    Spring 工具类 ClassPathBeanDefinitionScanner 组件Bean定义扫描https://blog.csdn.net/andy_zhang2007/article/det ...

  4. SQL server中常用sql语句

    --循环执行插入10000条数据 declare @ID intbeginset @ID=1 while @ID<=10000begininsert into table_name values ...

  5. C#桌面程序启动时传入参数

    using System;using System.Collections.Generic;using System.Linq;using System.Windows.Forms; namespac ...

  6. Spring MVC 复习

    概念 三层架构 将整个业务应用划分为三层 ​ 表现层:用来和客户端进行数据交互,一般采用MVC设计模式 ​ 业务层:处理公司具体业务逻辑 ​ 持久层:用来操作数据库 MVC模型 Model View ...

  7. CodeForces 955D Scissors

    昨晚CF比赛比较颓,今天有心情写题解就不错了QWQ 洛谷题目页面传送门 & CodeForces题目页面传送门 给定字符串\(a,b,|a|=n,|b|=m\),求是否可以在\(a\)中选\( ...

  8. JS基础 —— 跨域

    为什么会跨域 浏览器的同源策略(MDN:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) URL:协议 ...

  9. Golang Web应用 创建docker镜像笔记(win 平台)

    记录的是 本地编译好了再创建容器镜像的方法 ,这样子生成的镜像文件比较小,方便分发部署 win 平台需要设置golang交叉编译 生成linux可执行文件 CMD下: Set GOOS="l ...

  10. 【Python】生成器

    生成器是一种特殊的迭代器 # 斐波那契数列 10 def create_num(all_num): a, b = 0, 1 current_num = 0 while current_num < ...