React初识

React 是什么

• React 是 2013 年 FaceBook 开源的一个用于构建用户界面的 JavaScript 库
• 构建页面离不开的三个技术:
• HTML:构建页面的结构
• CSS: 构建页面的样式
• JavaScript: 页面动态内容和交互
• 使用最原生的 HTML、CSS 、JavaScript 可以构建完整的用户界面,但是会存在很多问题
• 比如操作 DOM 兼容性问题
• 比如过多兼容性代码冗余的问题
• 比如代码组织结构和规范的问题

React 特点

• 声明式编程
• 声明式编程是目前整个大前端开发的模式: Vue、React 、Flutter、SwiftUI
• 它允许我们只需要维护自己的状态,当状态改变时,React 可以根据最新的状态去渲染我们的UI界面 UI = f( state ); UI 是我们的界面,f 函数是构建页面的函数, state 是 app 的状态
• 组件化开发
• 多平台适配
• 2013 年,react 发布之初主要是开发 web 页面
• 2015 年 FB 推出 ReactNative 用于移动端开发
• 2017 年 FB 推出 ReactVR 用于开发虚拟现实 web 应用程序
• Flutter 中的 Widget - Element - RenderObject,对应的就是 JSX-虚拟 DOM - 真实 DOM
• VSCode 中的前端插件:
  1、Atom one dark theme: 主题
  2、Bracket Pair Colorizer
  3、ES7 React/Redux/GraphQL/React-Native snippets : 代码片段
  4、open in brower : 在浏览器中打开 html 代码
  5、live server: 创建本地服务
• 开发 react 必须依赖三个库:
• react: 包含 react 所必须的核心代码
• react-dom: react 渲染在不同平台所需要的核心代码, web 端 react-dom 会将 jsx 最终渲染成真是的 DOM,显示在浏览器中; native 端:react-dom 会将 jsx 最终渲染成原生的控件(比如 ios 中的 UIButton)
• babel: 将 jsx 转换成 react 代码的工具

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

这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息。

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

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

• 方式三：通过npm管理

ReactDOM.render 函数

• 这个函数接收两个参数:

• 第一个参数,传递要渲染的内容,这个内容可以是 html 元素,也可以是 react 组件
• 第二个参数,将渲染的内容挂载到那一个 HTML 元素上
  比如:

ReactDOM.render(<h3>{"hello react"}</h2>, document.getElementById("app"));

state 对象和 setState 函数

• 当数据变量变化需要更新渲染内容时,我们就需要将数据变量定义在 state 中, 可以在构造函数中 this.state = {property : value}
• 当数据更新时,我们可以通过 this.setState({property: value}) 来更新数据, 这里调用 setState 函数就会通知 react 重新调用 render()函数

• 这里需要注意数据的更新只能通过 setState 函数,不可以通过属性名直接赋值,比如 this.state.property = "zhangsan", 这样是不可以的
• setState 的调用是一个异步调用,当我们用 setState 更新状态的值时,通过 this.state.property 取得的值还会是旧值,比如

function test() {
  this.setState({
    property: "newValue";
  })
  console.log(this.state.property); // 这里输出的依然是 oldValue, 因为 JS 需要将当前的事务处理完后才执行后面的任务
}

事件绑定问题

• 在类中直接定一个函数,并将这个函数绑定到 html 原生的 onClick 事件上,当前这个函数的 this 指向的是谁呢?
• 默认情况下时 undefined
  因为在正常的 DOM 操作中,监听点击,监听函数中的 this 其实是节点对象(比如 button)对象;这是因为 React 并不是直接渲染成真是的 DOM,我们所编写的 button 只是一个语法糖,它本质是 React 的 Element对象,那么在这里发生监听的时候,react 给我们的函数绑定的 this 默认情况下就是一个 undefine
• 如果需要使用当前对象,我们可以在传入函数时直接绑定 this
  <button onClick={this.changeText.bind(this)}> 改变文本</button>

this 绑定问题解决方案

• 使用 bind 给事件显示的绑定 this,比如:this.onClick.bind(this),如果绑定的比较多,也可以直接在构造函数中将绑定好赋值给一个属性,在事件监听时将该属性传过去

constructor(props) {
      super(props);
      ....
      this.btnClick = this.btnClick.bind(this);
}
<button onClick={this.btnClick}>按钮2</button>

• 使用 ES6 class fields 语法, 声明一个属性为箭头函数,在事件监听时将该属性传过去

btnClick = () => {
   console.log(this.state.property);
}
<button onClick={this.btnClick}>按钮2</button>

• 事件监听时传入箭头函数,箭头函数不存在 this 绑定问题

btnClick(param) {
    console.log(this.state.property);
}

<button onClick={()=>{this.btnClick("message")}}>按钮2</button>

事件参数传递

• 在执行事件函数时,有时可能需要获取一些参数信息,比如 event 对象,其他参数, 这时最好的方式就是传入一个箭头函数

this.state.movies.map((item, index, arr) => {
  return (
    <li className="item" 
        onClick={ e => { this.liClick(item, index, e) }}
        title="li">
      {item}
    </li>
  )
})

 liClick(item, index, event) {
    console.log("li发生了点击", item, index, event);
  }

React 条件渲染

• 条件判断语句
• 三元运算符
• 与运算符
• 控制 display 属性是否为 none,为 none 时不显示

const titleDisplayValue = isShow ? "block": "none";
<h2 style={{display: isShow}}>你好</h2>

虚拟 DOM 的创建过程

• 我们通过 React.createElement 最终创建出来一个 ReactElement 对象,这个对象的作用是什么呢?React为什么要创建这个对象

• [ ]原因是 React 利用 ReactElement 对象组成了一个 JavaScript 的对象树,JavaScript 的对象树就是大名鼎鼎的虚拟 DOM(Virtual DOM), ReactElement 最终形成的树结构就是 Virtual DOM

为什么要使用虚拟 DOM

• 为什么要采用虚拟 DOM,而不是直接修改真实的 DOM

• 很难跟踪状态发生的改变: 原有的开发模式,很难跟踪到状态放生的改变,不方便调试
• 操作真是 DOM 性能较低,传统的开发模式会进行频繁的 DOM 操作,而这一做法性能非常低

• DOM 操作性能为什么非常低

• 首先,document.createElement 本身创建出来的就是一个非常复杂的对象
• 其次,DOM 操作会引起浏览器的回流和重绘

• 使用虚拟 DOM 可以将一次次对 DOM 的修改,合并批量的操作

创建项目并启动

1、全局安装: npm i -g create-react-app
2、切换到想创建项目的目录,使用命令:create-react-app 项目名称 创建项目
3、进入到项目文件夹 cd 项目名
4、启动项目: npm start