这是我参与「第四届青训营」笔记创作活动的第30天

React 历史及应用

应用场景

前端应用开发 | Web 端
移动原生应用开发
桌面应用开发（联合 electron）

历史

2010 引入 xhp 框架
2011 创建 FaxJS 即 React 的原型 Reactive | Structural | Performant | Seamless Client Server Rendering
2012 创建 React
2013 React 正式开源
2014至今 React 生态爆发

React 设计思路

响应式编程
- 状态更新
- 前端代码组件化
- 状态之间的互相依赖关系
组件化
- 组件是组件的组合或原子组件
- 组件内有状态 states
- 父组件可向组件内部传入状态 props
状态归属
- 组件声明状态和UI映射
- 组件有 props 和 state 两种状态
- 组件可由其他组件构成
生命周期
- mount
- update
- unmount

React 写法

hooks 写法

import React, { useState } from 'react';

function Example () {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Click ${count} times`;
  });
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)}>
        click
      </button>
    </div>
  );
}
复制代码

React 实现

JSX
Virtual DOM 声明式编程
Diff 算法
- 更新次数少 | 计算速度快
- 不同类型元素 - 替换
- 同类型DOM元素 - 更新
- 同类型组件元素 - 递归

React 状态管理库

核心思想

将状态抽离到 UI 外部统一进行处理

类型

Redux xstate mobx recoil

状态机

应用级框架

全栈开发框架

Next.js

Modern.js

Blitz next是一款用JS开发的全栈框架，它是基于express框架基础上开发而成，可以用react写客户端，node.js写服务端。一份代码可在前后端同时运行，这在next中称之为同构！

一些next.js框架基础介绍创建项目：npm init next-app 项目名，项目创建好后next会帮你搭好基础通用的模板，大多常用的api以及写法都能在模板中找到。

自定义head：使用组件可自定义<meta>标签和内容组件导入。

// 文件路径 page/_app.js
import Head from "next/head";
import '../styles/globals.scss'
 
export default function App({ Component, pageProps }) {
  return <>
    <Head>
      <title>我的博客 A-Tione</title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
    </Head>
    <Component {...pageProps} />
  </>
}

快速导航：标准写法<Link href=xxx><a>xxx</a></Link>，在next中通过标签的href链接定位路由可实现预加载路由页面，可使点击跳转无需发送请求。

同构代码：一份代码两端运行，在一处使用console.log调试，可在服务端和客户端页面都显示出log，这样更方便调试。但请注意同构代码时需要使用前后端都存在的对象，比如window、document等客户端才有的对象就无法在服务端log出来。

局部css：因为next是与react配套使用的，我们可用这样写css：<style jsx> 或者 xxx.module.css文件。

全局组件：若需要多处地方使用到同一组件，可使用全局组件，全局组件在路径page/_app.js中声明。

响应式系统与 React | 青训营笔记