【React新手学习指南】01 React修炼入门(小白专属系列)

本文链接：https://blog.csdn.net/huyang_1995/article/details/111304317

写在前面，大家好！我是【跨考菌】，一枚跨界的程序猿，专注于后台技术的输出，目标成为全栈攻城狮！这博客是对我跨界过程的总结和思考。如果你也对Java、后端技术感兴趣，抑或是正在纠结于跨界，都可以关注我的动态，让我们一起学习，一起进步~
我的博客地址为：【跨考菌】的博客

内容大纲，持续更新：

【React新手学习指南】01 React修炼入门(小白专属系列)
【React新手学习指南】02 React生命周期浅析(超详细小白也能看懂)
【React新手学习指南】03 React脚手架实操(适合新手)
【React新手学习指南】04 React中如何发送ajax请求？
【React新手学习指南】05 React组件通讯|监听原理总结
 【React新手学习指南】06 小白也能看懂的React Router教程
 【React新手学习指南】07 小白也能看懂的React Redux教程

在这里插入图片描述

如果你觉得对你有帮助的话，记得帮博主一键三连😊哦

1 React认识

1.1 React官网

英文官网: https://reactjs.org/
中文官网: https://doc.react-china.org/

1.2 React介绍

用于构建用户界面的 JavaScript 库(只关注于View)
由Facebook开源

1.3 React的特点

Declarative(声明式编码)
Component-Based(组件化编码)
Learn Once, Write Anywhere(支持客户端与服务器渲染)
高效
单向数据流

1.4 React高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM
DOM Diff算法, 最小化页面重绘

2 React的基本用法

2.1 相关js库

react.js: React的核心库
react-dom.js: 提供操作DOM的react扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

2.2 页面中导入js

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

2.3 编码

<script type="text/babel"> //必须声明babel
  // 创建虚拟DOM元素
  const vDom = <h1>Hello React</h1> // 千万不要加引号
  // 渲染虚拟DOM到页面真实DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

2.4 开发者调试工具

链接：https://pan.baidu.com/s/1WobUR3LL_3RezBmiSl1ORg 提取码：53jl
这是谷歌插件，打开chrome浏览器，打开chrome://extensions/，将上述文件拖动到chrome界面即可。
在这里插入图片描述
插件安装成功后可以看到在调试界面看到上图功能。

3 React JSX

3.1 效果图

在这里插入图片描述

3.2 虚拟DOM

React提供了一些API来创建一种 特别 的一般js对象
a. var element = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
b. 上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

3.3 JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: XML+JS
作用: 用来创建react虚拟DOM(元素)对象
a. var ele = <h1>Hello JSX!</h1>
b. 注意1: 它不是字符串, 也不是HTML/XML标签
c. 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
a. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

3.4 渲染虚拟DOM元素

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
a. 参数一: 纯js或jsx创建的虚拟dom对象
b. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

3.5 创建虚拟DOM的2种方式

纯JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title)

<script type="text/javascript">
    // 1. 创建虚拟DOM
    /*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/
    const msg = 'I Like You!'
    const myId = 'Atguigu'

    const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())
    // 2. 渲染到真实页面
    const domContainer = document.getElementById('test1')
    // debugger
    ReactDOM.render(vDOM1, domContainer)
  </script>

JSX:
<h1 id='myTitle'>{title}</h1>

  <script type="text/babel">
    // 1. 创建虚拟DOM
    /*方式二: JSX创建虚拟DOM元素对象*/
    const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
    // debugger
    // 2. 渲染到真实页面
    ReactDOM.render(vDOM2, document.getElementById('test2'))
  </script>

3.6 案例

实现图示效果：
在这里插入图片描述

  <script type="text/babel">
    /*
     功能: 动态展示列表数据
     */
    /*
     技术点:
     1). 使用JSX创建虚拟DOM
     2). React能自动遍历显示数组中所有的元素
     3). array.map()的使用
     */

    // 数据的数组
    var names = ['jquery', 'zeptoo', 'angular', 'react全家桶', 'vue全家桶']

    // 数据的数组-->标签的数组
    var lis = []
    names.forEach((name, index) => lis.push(<li key={index}>{name}</li>))
    // 创建虚拟DOM
    const ul = <ul>{lis}</ul>
    // 渲染虚拟DOM
    ReactDOM.render(ul, document.getElementById('example1'))
    const ul2 = <ul>{
      names.map((name, index) => <li key={index}>{name}</li>)
    }</ul>
    ReactDOM.render(ul2, document.getElementById('example2'))
  </script>

4 组件化思想

4.1 模块

理解: 向外提供特定功能的js程序, 一般就是一个js文件
为什么: js代码更多更复杂
作用: 复用js, 简化js的编写, 提高js运行效率
注：这个部分时拆分成多个部分来写的

4.2 组件

理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
为什么: 一个界面的功能更复杂
作用: 复用编码, 简化项目编码, 提高运行效率

4.3 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

类似于这样的
在这里插入图片描述

4.4 案例

 <script type="text/babel">
    // 1. 定义组件
    /*方式1: 工厂函数组件(简单组件)*/
    function MyComponent () {
      return <h2>工厂函数组件(简单组件)</h2>
    }
    /*方式2: ES6的类组件(复杂组件)*/
    class MyComponent2 extends React.Component {
      render () {
        console.log(this) // MyComponent2的实例对象
        return <h2>ES6类组件(复杂组件)</h2>
      }
    }
    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example1'))
    ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
  </script>