这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天 冲冲冲！

React

React的历史与应用

应用场景

• 前端应用开发
  • Facebook
  • Instagram
• 移动原生应用开发
  • Instagram
  • Discord
  • Oculus
• 结合Electron进行桌面应用开发

React设计思路

原生JS--UI痛点

• 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
• 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• UI之间的数据依赖关系，需要手动维护，如果依赖链长，则会遇到“Callback Hell(回调地狱)”

响应式与转换式

转换式系统!==响应式系统

• 响应式系统

事件-->执行既定的回调-->状态变更

• 前端UI

事件-->执行既定的回调-->状态变更-->UI更新

响应式编程

• 状态更新 UI自动更新

• 前端代码组件化，可复用，可封装

• 状态之间的互相依赖关系，只需声明即可

• 总结：

  • 1.组件是组件的组合/原子组件
  • 2.组件内拥有状态，外部不可见
  • 3.父组件可将状态传入组件内部

状态归属

状态归属于两个节点向上寻找到最近的祖宗节点

• 思考
  • React是单向数据流
  • 解决状态不合理上升问题
  • 组件的状态改变后更新DOM

组件化

• 组件设计
  • 组件声明了状态和UI映射
  • 组件有Props/State两种状态
  • “组件”可由其他组件拼装而成
• 组件代码
  • 组件内部拥有私有状态state
  • 组件接收外部的props状态提供复用性
  • 根据当前的state/props返回一个UI

生命周期

React(hooks)的写法与实现

示例代码01：

import React, {useState} from "react";

function Example() {
    const [count, setCount] = useState(0)

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

示例代码02：

import React, {useEffect, useState} from "react";

function Example() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        document.title = `You clicked ${count} times`
    })

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

React状态管理与应用级框架科普