[响应式编程与 React | 青训营笔记]

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

React的设计与实现 --- 响应式编程

• 当状态变更时UI会自动更新
• 前端代码组件化 可复用 可封装
• 状态之间的相互依赖关系只需声明

react 特点

• 采用组件化模式、声明式编码，提高开发效率及组件复用率。 
• React Native 中可以使用 React语法进行移动端开发
• 使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互

创建虚拟DOM

JSX创建虚拟DOM更方便，相当于语法糖

 // 1. 创建虚拟DOM
      const VDOM = (
        <h1 id="title">
          <span>Hello,React</span>
        </h1>
        ) /* 不用写引号，因为不是字符串,是jsx*/

虚拟DOM和真实DOM 虚拟DOM：

• 1、本质上是一个Object对象，一般对象
• 2、虚拟DOM比较 ”轻",真实DOM比较 “重”， 因为虚拟DOM是React内部在用，无需真实DOM这么多的属性
• 3、虚拟DOM最终会被React转化成真实DOM,呈现在页面上。

组件化

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

组件设计

1. 组件声明了状态和UI的映射。
2. 组件有Props/State两种状态，即私有状态和外部传入两种状态。
3. "组件"可由其他组件拼装而成。

jsx 语法规则

XML早期用于存储和传输的数据

JSON 也是用于存储和传输的数据，js内置对象

      1、定义虚拟DOM时，不要写引号

      2、标签中混入JS表达式时要用 {}

      3、样式的类名指定不用 class,要用className.

      4、内联样式，要用style = {{key: value}} 的形式去写

      5、只有一个跟标签

      6、标签必须闭合

      7、标签首字母

        （1）若小写字母开头，则将该标签转为 html同名元素，若html中无该标签，则报错

        （2）若大写字母开头，react就去喧嚷对应的组件，若组件没有定义，则报错
       

Hooks

• hooks是React的一种最常用的写法
• hooks是可以挂到react组件的生命周期上去执行的函数。
• hooks分为两种：useState、useEffect，也有其他的但也基本都是useState、useEffect两种的封装

useState（） 传入一个初始值，返回一个状态和set该状态的函数。通过调用该函数实现状态的修改。

useEffect（） 传入一个函数和一个状态的数组（依赖项）。有副作用的函数应传入useEffect中执行。