《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 } = props
return 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>