Web入门

前言
HTML是网页内容，DOM是操作HTML的API
网页（webpage）是由浏览器基于HTML DOM创建的
JavaScript是开发网页使用的语言
jQuery和React都是库（library），是与DOM交流的工具
React和React-Router, React-Redux结合起来构成框架（framework）供我们在开发中使用

---

DOM简介

1. 什么是DOM？

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。
DOM可以看作是JS操作HTML时的API。

DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

2. DOM的基本功能

页面的动态交互，实时变化

HTML DOM树

DOM基本功能：
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素

3. 页面动态更新

DOM能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。

1. 在浏览器加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记的所有元素，自上而下解析，遇到JavaScript浏览器会检查它的正确性，然后执行代码。
2. JavaScript继续执行，使用DOM检查页面、完成修改、从页面接受事件，或者要求浏览器从Web服务器获取其它数据
   注：document是一个反映HTML的对象，通过调用document的方法改变DOM的状态，也就是改变HTML页面
3. JavaScript修改了DOM时，浏览器会随着动态更新页面。

---

React

1. jQuery和React

jQuery简化了开发者与DOM的直接沟通，使开发者更容易操控DOM
React扮演开发者与DOM的中间人角色，开发者不用直接与DOM沟通，降低了沟通成本，且简化了网页创建的过程

2. React的核心技术

响应式UI (Reactive UI)

leave placeholders in your request to represent different variations of a same pose

虚拟DOM (Virtual DOM)

组件 (Components)

---

Redux

以下内容主要针对Redux库在React中的应用

1. Why redux?

在React中，状态管理使用props和state。

运用原生的方法来渲染组件的时候，数据是从父组件（parent component）通过props传递给子组件（child component）的。

当我们在渲染一个复杂的结构时，就需要把props自上到下地在组件树中传递，而中间经过的子组件即使不需要这些数据也要接收然后传递给下一级。举例说明，一个复杂的结构A --> B --> C --> D --> E，props数据传递A --> E，逆向callback E -- > A，中间的BCD需要传递一些它们不需要的数据。

当组件树的深度超过3的时候，代码量增大，props传递就不再是一个有效的方法了，除非你想敲props敲到手软。此类问题我们称为Prop-drilling。

要想解决Prop-drilling的问题，即避免使用props层层传递数据，就要使用别的方法管理状态，其中一种是使用context API，还有一种是用Redux

2. 什么是Redux

提供一个存放共享数据的地方（store），可以供外部访问修改。

Redux能够满足以下条件：
① 存放一个数据对象
② 外界能访问到这个数据
③ 外界也能修改这个数据
④ 当数据有变化的时候，通知订阅者

如何操作：
createStore(reducer)，初始化创建store
store.getState()，获取数据
store.dispatch，更新数据
store.subscribe，订阅数据变化然后进行setState

3. React-Redux

在React组件下，我们可以把store直接集成到React应用的顶层props里面，让每个子组件能访问到顶层props。

import { Provider } from "react-redux";


 

子组件可以直接把store中用到的数据取出、修改以及在数据变化时重新渲染UI。

---

References

• DOM是什么？有什么用处？js与DOM啥关系？
• What Is React?
• 详解react、redux、react-redux之间的关系
• How to avoid Prop-drilling in React
• 我们所说的前端框架与库的区别？