React介绍

致
84 阅读5分钟

1.React是什么?

  • React 是由 Facebook 开源的一个JS 库
  • 官方解释: React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库

image.png

2.React的特点(了解)

声明式编程

  • 什么是声明式编程:

    • 它描述目标的性质，让电脑明白目标，而非流程
    • 声明式编程是告诉计算机需要计算 “什么” 而不是 “如何” 去计算

  • 前端开发模式:

    • 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI
    • 它允许我们只需要维护自己的状态
    • 当状态改变时，React可以根据最新的状态去渲染我们的UI界面

image.png

组件化开发

  • 组件是 React 中重要思想

    • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用

  • 组件化思想应用

    • 有了组件化的思想，尽可能将页面拆分成一个个小的，可复用的组件
    • 这样让我们代码更方便组织和管理，并且扩展性也强

image.png

多平台适配

  • 2013年，React发布之初主要是开发Web页面；

  • 2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用 ReactNative）；

  • 2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（随着5G的普及，VR也会是一个火爆的应用场景

3.React开发依赖

  • 开发 React 必须依赖这三个库:

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

  • React为什么要依赖这三个库:

    • 其实, 这三个库是各司其职, 目就是让每一个库单纯做自己的事情
    • 为什么要进行拆分呢?
    • react中包含了 react 和 react-native 所共同拥有的核心代码

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

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

    • native端：react-dom会将 jsx 最终渲染成原生的控件 (比如Android中的Butto, iOS中的UIButton)

4.认识Bable

  • babel是什么:

    • 是目前前端使用非常广泛的编译器、转码器
    • 可以将ES6代码转为ES5代码，从而在现有环境执行

  • React和Babel的关系:

    • 默认情况下 React 其实可以不用 babel

    • 但前提是我们使用 React.createElement 来编写源代码, 它编写的代码非常繁琐可读性差

    • 我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement

5.引入React依赖

  • 如何添加这三个依赖：

    • 方式一：直接CDN引入
    • 方式二：下载后，添加本地依赖
    • 方式三：通过npm管理

  • 暂时我们直接通过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@6/babel.min.js"></script>
复制代码

React初体验

1.React基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React初体验</title>
</head>
<body>
  <div id="app"></div>
  <!-- 添加React的依赖 -->
  <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>

  <!-- 注意事项: 使用jsx,并且希望script中的jsx代码被解析,必须在script标签中添加type属性 -->
  <script type="text/babel">
    // <h2></h2>: jsx代码
    ReactDOM.render(<h2>Hello World</h2>, document.getElementById('app'))
  </script>
</body>
</html>
复制代码

  • React.render函数

    • 参数一: 要渲染的内容, 可以是HTML元素, 也可以是React的组件
    • 参数二: 将渲染的内容, 挂载到哪一个HTML元素上

  • 我们可以通过 {} 语法来引入外部的变量或者表达式

2.React初体验组件化开发

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

    • 我们说过 ReactDOM.render 第一参数是一个HTML元素或者一个组件
    • 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数

  • 在React中, 如何封装一个组件呢?

  • 这里暂时使用类的方式封装组件:

    • 定义一个类 (类名大写, 组件的名称是必须大写的, 小写会被认为是HTML元素)，继承自React.Component

    • 实现当前组件的render函数

      • render当中返回的 jsx 内容，就是之后React会帮助我们渲染的内容

图示

//封装APP组件
class App extends React.Component
  render(){
   return (
    <div>hello</div>
  }
// 渲染组件
ReactDOM.render(<App/>, document.getElementById ('app'))
复制代码

3.组件化-数据依赖

  • 在组件中的数据，我们可以分成两类：

    • 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容
    • 不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容

  • 参与界面更新的数据，是定义在当前对象的 state 属性中

    • 我们通过在构造函数中: this.state = {定义的数据}

    • 当我们的数据发生变化时，我们调用 this.setState 来更新数据，并且通知React进行update操作

      • 在进行update操作时，就会重新调用render函数, 并且使用最新的数据，来渲染界面

图示

// 封装APP组件
class App extends React.Component
  constructor() {
    super()
   // 定义数据
 this.state = {message: 'hello world'}
    // 使用数据  
 render() {
   return (
  <div>
    <h2x{this.state.message}</h2>
  </div> 
    )}
}
复制代码

4.组件化-事件绑定

  • React中事件绑定: 在标签中定义 on + 事件名

    • 例如: <button onClick={this.changeText}>改变文本</button>

  • 当前这个函数的this指向的是谁呢？

    • 默认情况下是 undefined
    • 这次因为React并不是直接渲染成真实的DOM, 我们所编写的button只是一个语法糖, 它的本质React的Element对象
    • 那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined

  • 我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this

    • 我们就需要在调用函数时，给这个函数直接绑定this
    • <button onClick={this.changeText.bind(this)}>改变文本</button>
avatar
文章
阅读
粉丝