React | 青训营笔记

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

1.重点内容

• react的历史与应用
• react的设计思路
• react(hooks)的写法
• react的实现
• react状态管理库
• 应用级框架科普

2.详细知识点

2.1 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的新工具/新框架开始涌现

应用：

• 前端应用开发如Facebook，instagram, nextfix网页版
• 移动应用开发，如Instagram, Discord
• 结合Electron,进行桌面应用开发

2.2 react的设计思路

响应式编程

组件化

1.组件时组件的组合

2.组件内拥有状态，外部不可见

3.父组件可讲状态传入组件内部

组件的设计

1. 组件声明了状态和UI的映射
2. 组件有Props/State两种状态
3. 组件可以有其他组件拼装而成

2.3 reactHook的写法

reactHook 是一个挂载再react声明周期的函数,可以让你再不编写class的情况下使用State以及React特性

使用Hook

import React, {useState} from 'react'
function Example(){
    // useState即为一个hook
    const [count, setCount] = useState(0)
    return (
     <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>       
    )
}

2.4 React 状态管理库

核心思想：讲状态抽离到UI外部进行统一管理

常见的库有：

2.5 应用级框架

modern.js

3.个人总结

今天的课程对我来说感觉有点隐晦难懂， 很多概念性质的东西， 可能是我没有学过react的原因，之后我会好好的去系统的学习一下react, 争取学会他