本文链接：https://blog.csdn.net/dauntless1310/article/details/108355338

ReactP1_React介绍_简单组件化开发案例

React介绍
简单组件化开发案例

React介绍

这边是react学习笔记，期间加入了大量自己的理解，用于加强印象，若有错误之处还请多多指出

什么是react

官方解释：一种用于构建用户界面的JavaScript库

A JavaScript library for building user interfaces
前端开发三个主要技术：

HTML —— 用于构建页面的结构
CSS —— 构建页面的样式
JavaScript —— 页面动态内容和交互

但是对应的使用这些技术开发会面临几个主要的问题，比如：
1、操作DOM兼容性的问题(需要兼容IE的时候是真的恶心人)
2、过多兼容性代码的冗余问题
3、代码组织和规范的问题
等等…

一直以来前端开发人员都在需求可以让自己开发更方便的JavaScript库，现在国内主要使用的三大框架：
从左往右依次是react，angular，vue
1、React（很多大厂多在使用，个人感觉用起来没vue方便，也有先入为主的意思）
2、Vue（尤大开发的框架，国内用的比较多）
3、Angular（这个不多介绍，个人也不会）

React的特点

声明式编程

这里介绍三种编程范式：命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)

命令式编程(Imperative)

**主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么**

以做菜举例，可以理解为，你作为一个大厨（码农）想吃糖醋排骨，但是你想让自己的徒弟（计算机），手把手的教自己的徒弟下一步应该怎么做（代码指令），然后徒弟最后给出糖醋排骨（输出结果）

声明式编程(Declarative)

以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做

以做菜为例，你（码农）想要一道糖醋排骨，告诉徒弟（计算机）你要吃糖醋排骨，一道怎么样的糖醋排骨（判断条件参数等等），徒弟带着这些要求走进厨房哐当哐当一顿操作，然后得到了一道糖醋排骨（输出结果）

函数式编程(Functional)

关注做什么而不是怎么做

以做菜为例，你（码农）想要一道糖醋排骨，你需要好几个徒弟（函数）来完成各种工艺，你给洗菜的徒弟（函数1）原材料（参数），洗菜徒弟把洗完的菜（输出参数）交给切菜的徒弟（函数2），以此类推，切好的菜给炒菜的，炒菜的最后端出成品菜。

可以吧视图界面当做函数中的应变量，数据当做自变量，每次不同的输入都会得到不同的值并且会立即更新展示
声明式编程是目前整个大前端开发的模式：Vue、React、Flutter 等等
它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面

组件化开发

组件化开发页面目前前端的流行趋势，我们会讲复杂的界面拆分成一个个小的组件
对整个页面进行合理的组件划分和设计，可以提高代码的复用率以及降低后期维护的成本（说白了就是麻烦了现在，舒服了未来）
组件化开发模型
根据页面内不同内容之间的包含关系，从逻辑层面抽象出一个包含从属关系的模型。一个页面里面包含了若干个组件，可以看做是一个树的节点下面附属了若干个子节点，以此作为组件化开发的设计思想。

多平台适配

不多赘述，就是又能开发web又能开发移动端还能弄vr（咱也没学过，咱也不敢说）

简单组件化开发案例

实现案例是一个简单的单击按钮改变文本事件，整个开发过程包含了未来react页面开发的主线流程，是十分重要的一个环节。IDE：vscode，插件vscode-icon，open in browser，Brackert Pair Colorizer，Beautify，Autoprefixer…
案例示范

开发的流程包含主要四块：

1、构建一个DOM基本页面框架
2、添加react库的依赖
3、对组件进行详细的开发
4、开发的组件对页面进行渲染

构建一个DOM基本页面框架

使用Emmet语法，( ! + tab )快速构造页面框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

添加react库的依赖

首先需要介绍一下react依赖的库
开发React必须依赖三个库：

**react**：包含react所必须的核心代码
**react-dom**：react渲染在不同平台所需要的核心代码
**babel**：将jsx转换成React代码的工具

其中：

react包中包含了react和react-native所共同拥有的核心代码。

react-dom针对web和native所完成的事情不同：

web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中

native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

babel是什么呢？

Babel ，又名 Babel.js。

是目前前端使用非常广泛的编辑器、转移器。
比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。

说人话就是你只管自己写ES6的代码，兼容性什么的，Babel全都帮你做了

React和Babel的关系：

默认情况下开发React其实可以不使用babel。
但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。

说人话就是，用就完事儿了

三种引用的方式

方式一：直接CDN引入

方式二：下载后，添加本地依赖

方式三：通过npm管理（后续脚手架再使用）

这里采用直接CDN引入的方式，代码如下：

<!-- 添加React的依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

记得引用的代码需要贴在最前面！！

对组件进行详细的开发

接下来就是正题部分了

首先，

编写React的script代码中，必须添加 type=“text/babel”，作用是可以让babel解析jsx的语法

组件化开发

进行组件化开发需要对App组件进行封装，这儿使用最基础的组件封装方式，创建一个class App，但是这样还不能说明这就是一个组件，为了让react框架能够认出这是一个组件，需要继承React.Compnent，单词component意为组件，可以理解为，告诉react，这里封装了一个组件

class App extends React.Component{
        constructor(){
        //利用ES6构造器语法来创建一个用于存储数据的对象
        }

        render(){
        //render函数用于对页面进行渲染
        }

        btnClick(){
        //案例中需要用到的用于执行单击事件的函数
        }

    }

constructor

首先从constructor开始

constructor(){
            super();
            this.state = {
                message:'Hello World',
            }
        }

super()——由于该部分存在继承（之前那个React.Component），需要使用super()方法初始化父类的实例

this.state——此处需要使用this，才能使得指针指向该组件

message:‘Hello World’——且数据需要在state中并且调用指定方法才能使框架自动调用render函数，使得页面发生数据响应的重绘

render( )

render(){
            return(
                <div>
                    <h2>{this.state.message}</h2>
                    <button onClick={this.btnClick.bind(this)}>改变文本</button>
                </div>
            )
        }

render()函数——用于渲染，若需要数据响应是渲染，需要使用指定方法setState()使框架自动调用，手动调用不会使得state中的数据和页面上的数据更新保持一致

注意，语法规定渲染参数的返回值中只能保有一个根标签，所以使用一个div对多个元素进行包裹

this.btnClick.bind(this)——此处需要对事件进行绑定this，即bind(this)，否则在调用函数时会因为没有指向该组件的指针，因此无法找到组件中的方法，导致找不到函数，调用失败

btnClick()

btnClick(){
            this.setState({
                message:'Hello React',
            })
        }

使用setState才能让框架自动调用render函数对页面进行数据响应式更新

更新方法为传入一个新的json数据结构

开发的组件对页面进行渲染

这就是一行代码的事儿了，代码如下

ReactDOM.render(<App/>,document.getElementById("app"));

 ReactDOM.render函数：
参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
这里我们传入了一个h2元素，后面我们就会使用React组件
参数二：将渲染的内容，挂载到哪一个HTML元素上
这里我们已经提定义一个id为app的div

参数分别对应的是之前的自己开发的App和一开始构建的页面中的div id=“app”
你甚至可以理解div id="app"是一个坑，前面的class App里面的代码是个萝卜，把App中返回的代码放入div id="app"这个坑里面

课程出自coderwhy（王红元老师）

最后，爱生活，爱猪猪