React相关学习导引

目录

扩展学习资料

什么是React？

什么是Component

组件树结构

虚拟dom

为何要选React

选择React

React生态

为何选择React

学习目录

思考一下~

---

扩展学习资料

Awsome React知识体系

https://github.com/enaqx/awesome-react

了解React生态，在看视频前或者看完视频后看本篇资料都可以

什么是React？

facebook工程师在2011年开发的，高效的、专注业务开发，无需和dom打交道的框架，并且轻量、易于扩展

用于构建用户界面的JavaScript库【偏重解决UI层（界面层）问题】

构建用户界面 => 组件（Components）【一小块UI界面】，是独立的可重复使用的。

什么是Component

、

每个区域是一个组件

React官网

组件树结构

虚拟dom

React Element 【js虚拟dom】 => Dom Element 【实际dom对象】

会对组件的状态做出响应，并且更新页面UI

为何要选React

选择React

 

React生态

React-Redux【状态管理】

React-Router【路由】

dva【脚手架】

AntDesign【企业UI框架】

Styled-Component【css解决方案】

React Native【跨平台UI框架】

TaroJS【跨平台小程序框架】

为何选择React

• 组件化的开发构思，项目便于维护
• 只需关注业务逻辑，高效快速更新DOM
• 海量的周边生态，友好的开发环境

学习目录

学习React

进入前厅： {基础知识} {环境搭建、JSX、CSS、props}

步入殿堂：{进阶知识} {事件处理、state、生命周期、设计模式}

游历花园：{生态工具} {React router、AntDesign}

探索边廊：{高级应用} {Hooks、新生命周期、状态管理、TS应用}

攀登穹顶：{原理讲解} {虚拟Dom、Fiber、diff算法}

思考一下~

【题目1】请认真思考并用脑图的形式表达自己对react和react生态的了解。

答：react脑图、react生态脑图

【题目2】观察CSDN页面，思考：如果让你来设计框架和组件，应该如何去做页面组件的划分呢？