关于前端:React-入门笔记

5次阅读

共计 2636 个字符，预计需要花费 7 分钟才能阅读完成。

React 是一个 JavaScript 库

React : A JavaScript library for building user interfaces. ——Jordan Walke

利用场景：
- 前端利用开发，如 Facebook、Instagram、Netflex 网页版
- 挪动原生利用开发，如 Instagram、Discord、Oculus
- 联合 Electron，进行桌面利用开发
- 3D 开发：react-three-fiber
React 的历史
- 2010 年：Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思维，启发了起初的 React 的设计
- 2011 年：Jordan Walke 发明了 FaxJS，也就是起初的 React 原型
- 2012 年：在 Facebook 收买 Instagram 后，该 FaxJS 我的项目在外部失去应用，Jordan Walke 基于 FaxJS 的教训发明了 React
- 2013 年：React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架
- 2014 年：生态大暴发，各种围绕 React 的新工具 / 新框架开始涌现

原生 JavaScript UI 编程痛点
- 状态更新，UI 不会自动更新，须要手动调用 DOM 进行更新
- 欠缺根本的代码层面的封装和隔离，代码层面没有组件化
- UI 之间的数据依赖关系须要手动保护，如果依赖链路过长会引起回调天堂 Callback Hell
响应式与转换式
- 转换式零碎：给定输出求解输入，例如编译器、数值计算
- 响应式零碎：监听事件，音讯驱动，例如监控零碎、UI 界面
响应式零碎

事件 -> 执行既定回调 -> 状态变更
响应式的前端 UI 编程：

事件 -> 执行既定回调 -> 状态变更 -> UI 更新
React 响应式编程特点
- 状态更新，UI 自动更新
- 前端代码组件化，可复用，可封装
- 状态之间的相互依赖关系，只需申明即可
组件化
- 组件是组件的组合 / 原子组件
- 组件外部领有状态，内部不可见
- 父组件可将状态传入组件外部
组件状态归属问题
- 共享状态归属于两个组件节点的最近先人节点，即状态晋升
- React 是单向数据流，永远是父组件给子组件传递状态，子组件只能调用函数更改状态
- 应用状态治理库如 redux 解决状态不合理晋升的问题
- 如何批改 DOM : 将 JSX 文件本义为 JS 文件、利用虚构 DOM 树和 diff 算法来更新 DOM
组件设计
- 组件申明了状态和 UI 的映射
- 组件有 props 和 state 两种状态
- 组件可由其余组件拼装而成
组件特点：
- 组件外部领有公有状态 state
- 组件承受内部的 props 状态提供复用性
- 依据以后的 state 和 props 返回一个 UI

最罕用的两个 Hooks 是 useState 和 useEffect

useState：传入一个初始值，返回一个状态，和 set 该状态的函数，用户能够通过调用该函数，来实现状态的批改

import React, {useState} from 'react';

const Example = () => {const [count, setCount] = useState(0);
return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>
);
}

useEffect：两个参数，一个是要执行的函数，一个是依赖项数组（能够不传依赖性）。有副作用的函数要传入到 useEffect 来执行。副作用示意除了单纯的计算之外还要做其余的事件，比方网络申请、更新 DOM、localStorage 数据等。

import React, {useState, useEffect} from 'react';
const Example = () => {const [count, setCount] = useState(0);
// 应用一个副作用，传入的 [count] 数组使得此副作用只有当 count 变量扭转时才会被调用
useEffect(() => {
  // 副作用：Update the document title using the browser API
  document.title = `You clicked ${count} times`;
}, [count]);

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>
);
}

Hooks 的应用规定：
- 只在最顶层应用 Hooks，不要在循环，条件或嵌套函数中调用 Hooks，确保总是在 React 函数的最顶层以及任何 return 之前调用他们。
- 只在 React 函数中调用 Hooks，不要在一般的 JavaScript 函数中调用 Hooks，能够在 React 的函数组件中调用 Hooks，能够在自定义 Hooks 中调用其余 Hooks

React 是不能间接在浏览器中运行的，有这些问题
- React 的 JSX 语法不合乎 JavaScript 规范语法
- 返回的 JSX 产生扭转时，如何更新 DOM
- state/props 更新时要从新触发 render 函数
如何实现
- 将 JSX 文件转译（transpile）成 JS 文件
- 利用虚构 DOM 树
  - 实在 DOM（Document Object Model）是浏览器创立页面的文档对象模型
  - 虚构 DOM 树是在 JS 内存中保护的一个对象，具备和 DOM 相似的树状构造，并和 DOM 能够建设一一对应的关系
  - 利用虚构 DOM 就不必操作实在 DOM 提供的 API 来批改 DOM 了：它赋予了 React 申明式的 API，通知 React 心愿让 UI 是什么状态，React 就确保 DOM 匹配该状态，前端工程师便能够从属性操作、事件处理和手动 DOM 更新这些操作中解放出来
- 利用 Diff 算法
  - 状态扭转时，先更新虚构 DOM 树，而不是间接更新 DOM 树，通过 Diff 算法，求出起码要更新的节点，而后再去更新真正的 DOM 树
  - 完满的最小 Diff 算法，须要 O(n^3)的复杂度；就义实践最小 Diff，换取工夫，失去了 O(n)复杂度的算法
    
    不同类型元素同类型元素同类型的组件元素
    
    替换更新递归