其他分享
首页 > 其他分享> > 574 React系列(一) - 邂逅React开发

574 React系列(一) - 邂逅React开发

作者：互联网

React系列(一) - 邂逅React开发

我个人一直喜欢使用邂逅这个词，我希望每个人在和一个新技术接触的时候，都是一场美丽的邂逅。

而React本身绝对是优雅和美丽的，所以从这里开始，我们和React来一场美丽的邂逅吧！

一. 认识React

1.1. React是什么？

React是什么呢？相信每个做前端的人对它都或多或少有一些印象。

这里我们来看一下官方对它的解释：用于构建用户界面的 JavaScript 库。

图片React是什么？

我们知道对于前端来说，主要的任务就是构建用于界面，而构建用于界面离不开三个技术：

那么使用最原生的HTML、CSS、JavaScript可以构建完整的用户界面吗？当然可以，但是会存在很多问题

所以，一直以来前端开发人员都在需求可以让自己开发更方便的JavaScript库：

现在前端领域最为流行的是三大框架：

图片三个框架

而Angular在国内并不是特别受欢迎，尤其是Angular目前的版本对TypeScript还有要求的情况下。

Vue和React是国内最为流行的两个框架，而他们都是帮助我们来构建用户界面的JavaScript库。

1.2. React的起源

React是2013年，Facebook开源的JavaScript框架，那么当时为什么Facebook要推出这样一款框架呢？

这个源于一个需求，所产生的bug：

图片Facebook功能需求

该功能上线之后，总是出现bug：

bug是否可以修复呢？当然可以修复，但是Facebook的工程师并不满足于此；

他们开始思考为什么会产生这样的问题；

他们就去思考，是否有一种新的模式来解决上面的问题：

1.3. React的特点和优势

1.3.1. React的特点

声明式编程：

图片声明式编程

组件化开发：

图片组件化开发

多平台适配：

图片react多平台

1.3.2. React的优势

React由Facebook来更新和维护，它是大量优秀程序员的思想结晶：

Vue.js框架设计之初，有很多的灵感来自Angular和React。

Flutter的很多灵感都来自React，来自官网的一段话：（SwiftUI呢）

图片来自Flutter官网

所以React可以说是前端的先驱者，它总是会引领整个前端的潮流。

1.4. React的现状

另外在HackerRank中，2020年有一份调用，你更想要学习的framework（框架）：

图片哪一个是你最想要学习的框架

国内外很多知名网站使用React开发：

图片image-20200608115008557

目前国内在大型公司使用React的较多：

图片高级前端工程师要求

二. Hello React

2.1. 原生案例实现

为了演练React，我们可以提出一个小的需求：

图片案例效果

但是，我们使用React实现之前，先使用原生代码来实现，这样更加方便大家对比React和原生：

原生实现代码如下：

<!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>
  
  <h2 class="title"></h2>
  <button class="btn">改变文本</button>

  <script>
    // 命令式编程: 每做一个操作,都是给计算机(浏览器)一步步命令
    // 声明式编程:
    // 1.定义数据
    let message = "Hello World";

    // 2.将数据显示在h2元素中
    const titleEl = document.getElementsByClassName("title")[0];
    titleEl.innerHTML = message;

    // 3.点击按钮,界面的数据发生改变
    const btnEl = document.getElementsByClassName("btn")[0];
    btnEl.addEventListener("click", e => {
      message = "Hello React";
      titleEl.innerHTML = message;
    })

  </script>

</body>
</html>

2.2. React开发依赖

开发React必须依赖三个库：

第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。

其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情：

babel是什么呢？

React和Babel的关系：

所以，我们在编写React代码时，这三个依赖都是必不可少的。

那么，如何添加这三个依赖：

暂时我们直接通过CDN引入，来演练下面的示例程序：

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

2.3. Hello World

下面我们通过一个Hello World的案例来看下如何使用React开发。

需求非常简单：通过React，在界面上显示一个Hello World

<div id="app"></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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  // 通过ReactDom对象来渲染内容
  ReactDOM.render(<h2>Hello World</h2>, document.getElementById("app"));
</script>

代码解析：

显示效果：

图片Hello World

但是目前我们渲染的内容是定义死的，能否将其抽取到一个变量中呢？

// 将数据定义到变量中let message = "Hello World";// 通过ReactDom对象来渲染内容ReactDOM.render(<h2>{message}</h2>, document.getElementById("app"));

2.4. Hello React

按照我们最初的案例，我们已经实现了Hello World，但是我们希望点击一个按钮后，修改为Hello React

2.4.1. 错误的方式

下面的代码是我们正常的执行逻辑，但是会报错：

<body>
  
  <div id="app">
    <button class="change-btn">改变文本</button>
  </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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 将数据定义到变量中
    let message = "Hello World";

    // 通过ReactDom对象来渲染内容
    ReactDOM.render(<h2>{message}</h2>, document.getElementById("app"));

    // 获取btn
    const btnEl = document.getElementsByClassName("change-btn")[0];
    btnEl.addEventListener("click", (e) => {
      console.log(e);
    })
  </script>
</body>

2.4.2. 正确的方式

虽然可以实现，但是整个代码的流畅过于繁琐

<body>

  <div id="app">
  </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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 将数据定义到变量中
    let message = "Hello World";

    // 通过ReactDom对象来渲染内容
    render();

    // 定义一个执行的函数
    function btnClick() {
      message = "Hello React";
      render();
    }

    function render() {
      ReactDOM.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>改变文本</button>
        </div>
      ), document.getElementById("app"));
    }
  </script>
</body>

2.4.3. 组件的方式

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：

在React中，如何封装一个组件呢？

具体的代码如下：

class App extends React.Component {
  render() {
    return (<h2>Hello World</h2>)
  }
}

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

如果我们的Hello World是依赖变量的，并且会根据按钮的点击而改变呢？这里涉及到几个核心点

1.数据在哪里定义

2.事件绑定中的this

我们一起来看一下代码是如何实现的：

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

  <!-- 添加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> -->

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


  <!-- 开始开发 -->
  <script type="text/babel">
    // 封装App组件
    class App extends React.Component {
      constructor() {
        super();
        // this.message = "Hello World";
        this.state = {
          message: "Hello World"
        }
      }

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

      btnClick() {
        // this.message = "Hello React";
        // this.state.message = "Hello React";
        // console.log(this.state);
        this.setState({
          message: "Hello React"
        })
      }
    }

    // 渲染组件
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

</body>

</html>

标签：邂逅,react,render,574,React,组件,message,Hello
来源： https://www.cnblogs.com/jianjie/p/14259548.html