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

概述

本节课程主要分为四个方面：

• React 的历史与应用 - 介绍 React 的发展历史以及应用场景。

• React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。

• React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。

• 该课程需要这些前置知识：

• HTML，JS，CSS 基础。

• 基础的数据结构/算法知识，如二叉树，深度遍历等。

• 会使用浏览器提供的 DOM API 来修改 DOM，更新 UI。

课前 （必须）

• 体验 React
• 访问 reactjs.org/docs/gettin… 体验 React 框架。

课后

学习了解 next.js 框架 nextjs.org/

组件化

总结

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

思考与解答

思考∶ 1.React是单向数据流，还是双向数据流? 2.如何解决状态不合理上升的问题? 3.组件的状态改变后，如何更新 DOM ?

解答： 1.React是单向数据流 2.使用React状态管理库 3.虚拟DOM策略，把改变的DOM子树给更新

组件的设计

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

组件的生命周期

dom的创建在mounting时刻。

总结

React脚手架意义

• 脚手架是开发现代Web应用的必备
• 充分利用 Webpack，Babel，ESLint等工具辅助项目开发
• 零配置，无需手动配置繁琐的工具即可使用
• 关注业务，而不是工具配置

事件对象

• 可以通过事件处理函数的参数获取到事件对象
• React中的事件对象叫做：合成事件
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
• 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
• 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

有状态组件和无状态组件

• 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
• 状态(state) 即数据
• 函数组件没有自己的状态，只负责数据展示
• 类组件有自己的状态，负责更新UI，让页面动起来