react学习笔记
- react介绍
react是用来构建用户界面的javascript UI库，它只关注视图层。
2. react特点
- 声明式编码
- 组件化编码
- 高效渲染
- 可以使用reactnative编写移动端开发应用
这里需要注意声明式编码与原来命令式编码有啥区别：
通俗来讲命令式编码做任何一件事都需要亲力亲为才能实现，反而声明式编码只需要告诉我需要什么，至于怎么做不需要自己亲自实现，都是交给框架来做。从这可以看出声明式编码让开发者更加高效，代码更加简洁。
react高效原因？
采用虚拟DOM,不是直接去操作dom，使用dom diffing算法，计算出需要更新dom, 从而减少页面绘制
3. react开发相关核心库
- react.js (react核心库)
- react-dom (提供react操作dom扩展库)
- babel.js (将jsx语法转换成标准的javascript代码)
4. 创建虚拟dom两种方式
4.1 采用jsx语法来创建
jsx创建虚拟DOM
4.2 采用js创建(这种不推荐)
使用js创建虚拟DOM
虚拟DOM与真实DOM区别：
- 虚拟dom本质就是一个普通一般对象
- 虚拟dom是由react来维护的，身上的属性相比真实dom要少很多，因此虚拟dom比真实dom更加`轻`
- 虚拟dom最终都会由react转换成真实dom，最终呈现在页面上
5. jsx语法规则
jsx全称 Javascript xml, react定义它类似为xml一种js扩展，本质就是React.createElement()语法糖.
jsx语法规则:
- 定义虚拟dom时不能用引号
- 在使用类class时，要用className
- 在使用内联style时，要用{{key:value}}
- 在虚拟dom中使用js表达式时，要使用{}
- 只能有一个根标签
- 标签必须要闭合
- 标签首字母：1. 如果标签首字母是小写，那么react会将该标签转换成html标签去寻找，如果未找到就会报错。2. 如果标签首字母是大写，那么会去渲染该组件，如果未找到就会报错。
6. 模块与组件，模块化与组件化理解
6.1 模块
模块：向外提供一个特定功能的js程序，一般就是js文件
为啥需要拆分模块：随着业务逻辑复杂，代码量越来越多
作用：复用js代码，简化js编码，提高js运行效率
6.2 组件
组件：实现某个局部功能的代码和资源集合(html/css/js/png)
为啥需要组件: 由于页面功能复杂性，需要拆分成多个组件
作用：提高代码复用率，高效开发
6.3 模块化
通俗来讲就是将一个应用拆分成多个模块来编写就称为模块化
6.4 组件化
通俗来讲就是将某个功能拆分成多个组件来编写就称为组件化
不管是组件化还是模块化都是为了提高代码复用率、降低耦合、简化代码编写、提高开发效率
7. 创建组件两种方式
- 函数式组件
1_函数式组件
ReactDOM.render()这个过程做了些啥？ React首先会去解析这个组件，发现这个组件是函数定义的，那么会调用这个函数，将返回虚拟DOM转换成真实dom呈现在页面上.
- 类式组件
2_类式组件
ReactDOM.render()这个过程做了啥？ react解析组件标签，发现组件是类来定义的，那么会通过new方式来创建组件实例，然后在根据实例调用原型上render()方法，将返回虚拟dom转换成真实dom呈现在页面上。
这里需要注意的是：组件名需要首字母大写，组件只有一个根标签，标签需要闭合。
8.组件三大核心属性
8.1 state
理解: state是组件最重要属性，它是一个对象(可以包含多个key,value 键值对)，组件被称为`状态机`，通过更新组件的state来对应界面更新(render()方法被调用，重新渲染组件)，state不能直接更新和修改，只能调用this.setState()方法来更新。这里需要说明一下函数组件是不能使用state, 应此函数组件又称为无状态组件。(由于react提供新功能hook，它可以在函数中使用state，这在后面会详细说)
8.2 props
理解：每个组件对象上都有一个props属性(全称properties)，组件对象上所有属性都会保存到props上
作用：用来组件之间传递数据，组件之间传递方向是由外到内(父亲->孩子)，并且数据流是单向的，因此我们不应该在内部去修改props,这样会影响外部数据，导致数据发生混乱，不容易理解。
谈到props这里需要提一下相关一个库props-type，这个库是用来限制props传递数据类型。
对props进行限制
函数组件是如何使用props：
对props进行限制
8.3 ref
理解：组件内标签可以通过ref来标示自己
作用：在某些情况下，需要在典型数据流之外强制修改子组件，子组件可能是组件实例，也可能是一个dom元素
我们应该避免使用refs任何可以用声明式完成的功能，常见使用场景(管理焦点、使用第三方的dom、触发强制动画)
使用方式有三种:
8.3.1 通过React.createRef()来创建，并且将值附属到组件实例上。这样就可以随意使用了
myRef = React.createRef();
8.3.2 通过回调refs方式来创建
不同于createRef()传递refs属性，它会传递一个函数。这个函数接收React组件实例或者一个DOM元素，以便他们在其他地方存取与访问
