react学习之路（一）

原始猿miser

于 2022-11-27 23:13:38 发布

阅读量452

点赞数 1

分类专栏： study_document 文章标签： react.js javascript 学习

本文链接：https://blog.csdn.net/qq_41347964/article/details/127972876

版权

study_document 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

《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>