《React学习手册（第二版）》学习笔记（一）

React运行机制

如何在浏览器中使用react

首先要引入以下两个库：React和ReactDOM
1、React：用于创建视图
2、ReactDOM：负责在浏览器中渲染UI
以上两个库都可以通过CDN引用，方式如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React运行机制</title>
</head>
<body><div id='root'></div><script src='https://unpkg.com/react@16/umd/react.development.js'></script><script src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script><script>//react和js代码</script>
</body>
</html>

注意：1、js代码可以放在单独文件中，但是页面加载的时候必须放在react后面。
2、以上使用的是react的开发版本，可以在控制台看到所有的错误消息和警示，如下是供生产环境使用的简化版本，看不到警示消息。

<script src='https://unpkg.com/react@16/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>

react元素(创建一个元素)

React元素是对真正DOM元素的描述。换言之，React元素是如何创建浏览器DOM的指令。
React.createElement(c1,c2,c3)：创建一个React元素

React.createElement('h1',{id:'ele1'},'hello world')  //<h1 id='ele1'>hello world</h1>
React.createElement('ul',null,React.createElement('li',null,'section two'),React.createElement('li',null,'section one'))
<ul><li>section two</li><li>section one</li>
</ul>

c1:创建元素类型
c2:设定元素的属性
c3:元素的子节点，可以并列多个子元素

reactDOM（渲染）

创建一个React元素之后要对它进行渲染。使用reactDOM.render在DOM中进行渲染。与渲染有关的一切功能都在ReactDOM包中。
ReactDOM.render(c1,c2)

ReactDOM.render(ele1,document.getElementById('root'))

c1:想要渲染的元素，可以为数组
c2:目标节点，指明在哪里渲染。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React运行机制</title>
</head>
<body><div id='root'></div><script src='https://unpkg.com/react@16/umd/react.development.js'></script><script src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script><script>const ele1 = React.createElement('h1',{id:'ele1',key:'ele1'},'hello world')const ele2 = React.createElement('h1',{id:'ele2',key:'ele2'},'hello today')ReactDOM.render([ele1,ele2],document.getElementById('root'))</script>
</body>
</html>

页面显示如下：

React的主要优势就在于能把数据与UI分开。可以借助javascript逻辑构建React组件树。如下：
要用如下代码实现一个表功能

React.createElement('ul',null,React.createElement('li',null,'section one'),React.createElement('li',null,'section two'),React.createElement('li',null,'section three'))

完全可以使用数组去映射，把数据和渲染的过程分开，如下

const list = [{ key: 1, text: 'section one' },{ key: 2, text: 'section two' },{ key: 3, text: 'section three' }
]
const ele3 = React.createElement('ul', null, list.map(item=>React.createElement('li', {key:item.key}, item.text)))
ReactDOM.render(ele3, document.getElementById('root'))

react组件

react组件方便复用相同的结构，只需要在结构中填充不同的数据即可。例如上一小节中的只需要替换list数据就可以实现渲染不同的数据。
本小节我们可以自己创建一个组件，实现只传数据复用组件逻辑。
创建一个如下组件：

function TaskList(props){const { items } = propsreturn React.createElement('ul',null,items.map((item,index)=>React.createElement('li',{key:index},item)))
}
const task = ['机器学习','计算机网络高分笔记','C++ Primer Plus'
]
const ele4 = React.createElement(TaskList,{items:task},null)
ReactDOM.render(ele4,document.getElementById('root'))

最终效果如下：

机器学习
计算机网络高分笔记
C++ Primer Plus

react组件历史回顾

React刚开源时，创建组件使用createClass，React16（2017）中已经被弃用
类组件可以使用class TaskList extends React.Component{render(){}}创建组件，但是不久的将来也将会被弃用

在React中使用JSX

上一章节通过createElement函数可以清楚看到React如何运作，但实际开发过程中，并不会使用这种方法创建复杂且可读性不高的句法树。所以要借助JSX,JSX是js与XML中的X的综合体。
JSX与HTML很像，元素的类型通过标签指定，标签的属性代表元素的属性，子元素添加在起始和结束标签之间。
如上一章末尾提到的组件的复用使用的是如下代码

const ele4 = React.createElement(TaskList,{items:task},null)
ReactDOM.render(ele4,document.getElementById('root'))

事实上，可以直接使用如下，简答易读：

<TaskList items={task}></TaskList>

使用JSX注意如下点

1、JSX与html：class是js的保留字，因此定义JSX组件的属性类名使用：className

2、JSX简洁，可读性高，但是浏览器却无法解释，因此在上述代码中无法直接使用JSX语法。此时，需要借助Babel工具把JSX解释为createElement调用。

Babel

知道了Babel的作用，就要知道如何使用。
使用Babel有很多种方式，最容易上手的是使用CDN引入，如下：

<script src='https://unpkg.com/react@16/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script>
<script src='https://unpkg.com/@Babel/standalone/babel.min.js'></script>
<script type="'text/babel">//在这里编写JSX代码， 编译类型为'text/babel'
</script>

react学习之路（一）相关推荐

React 学习之路（五）事件处理
事件处理 React元素的事件,和DOM事件处理有着相似之处,但是也有着不同之处. React事件绑定属性的命名采用驼峰命名如果使用React你需要使用jsx语法,就需要传入一个函数作为事件处理函数 ...
webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
大数据学习之路（转载）
#大数据学习之路(转载) 博文地址https://blog.csdn.net/zys_1997/article/details/78358992 看到一个博主写的大数据学习路线,看了比较心动,想着自己 ...
React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 ID:suibichuanji 点击下方 ...
Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
拿下斯坦福和剑桥双offer，00后的算法学习之路
董文馨,00后,精通英语,西班牙语.斯坦福大学计算机系和剑桥大学双Offer,秋季将进入斯坦福大学学习. 10岁开始在国外上学:12岁学Scratch: 13岁学HTML & CSS: 14岁 ...

react学习之路（一）