day_01

Feature of React

1）声明式编码
2）组件化编码
3）React Native编写原生应用
4）高效 e.g. diffing

babel的作用

ES6==>ES5 jsx ==>jx

hello_react 步骤

准备好一个容器div
引入React核心库 react.development.js
引入React_dom
引入babel 转换格式
<script type="text/babel">此处一定要写babel 要不然会默认识别成javascript
创建虚拟DOM const VDOM = <h1>Hello,React</h1>（jsx 不用写引号）
渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test'));

虚拟DOM的两种创建方式

js创建用React.createElement();
jsx 解决了创建虚拟DOM太过于繁琐的问题其本质还是语法糖，通过babel翻译成js的写法

虚拟DOM与真实DOM

本质是Object
虚拟DOM比较’轻‘ cause 虚拟DOM是React内部在用，无需真实DOM那么多的属性
虚拟DOM最终会被React转化成真实DOM

jsx语法规则

定义虚拟DOM时，不要写引号
标签中混入js表达式时要用{}
样式的类名指定不要用class 而是className (与ES6中的class冲突）
内联样式，要用style={{key:value}}的形式去写
虚拟DOM只能有一个根标签
标签必须闭合
标签首字母
- 若小写字母开头，则转换成html同名元素如无同名元素，则报错
- 若大写字母开头，react就去渲染对应的组件，如组件没有定义，则报错

!!! 一定注意区分 js语句（代码）与 js表达式

day_02

组件与模块

模块：向外提供特定功能的js程序组件：用来实现局部功能的代码和资源的集合

函数式组件

函数式组件中的this是undefined cause babel翻译后变成了严格模式

after ReactDOM.render: React解析组件标签找到组件，发现组件是函数定义的，随即调用该函数并将返回的虚拟DOM转为真实DOM，随后呈现

类式组件

类的基本知识与java相似 notice： constructor中super要在前面 e.g. constructor(name,age,grade){ super(name,age) this.grade = grade}
创建类式组件的步骤

创建一个类继承React.Component 使用render() 且必须要有返回值
- notice:render在原型对象上,供实例使用
渲染组件到页面
1. React解析组件标签，找到组件
2. 发现组件使用类定义，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3. 将返回的虚拟DOM转化成真实DOM 并呈现在页面中

对state的理解

组件实例三大核心属性之一

类中的方法this指向

在class中局部开启了strict模式
e.g. x = P1.study(); 
study(){
    console.log(this);
}
x() ==> undefined P1.study()==>P1

解决类中的this指向问题

`` this.changeWeather = this.changeWeather.bind(this);

use strict模式下

在全局作用域中，this指向window对象
在全局作用域函数中，这种的this等于undefined
对象的函数中的this指向调用函数的对象实例
构造函数中的this指向构造函数创建的对象实例

window.onclick = 实例.changeWeather = 实例.changeWeather.bind(实例）; 通过bind改变this指向

状态不可以直接更改需要通过setState API 且更新进行的是合并的操作而不是替换
构造器调用一次 render调用1+n次 n是更新的次数

state 的简写方式

类中可以直接写赋值语句 a=1 给实例对象内部添加一个属性可以通过赋值语句+箭头函数改变this的指向

state 总结

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined a.通过bind强制绑定 b.箭头函数
状态数据不能直接修改需要通过setState API

day_03

props的基本使用

可以通过 ReactDOM.render(<类>)中的<>传递属性，并呈现在实例对象的props属性上

review ... 展开运算符

可以展开数组并连接数组 e.g. let arr3 = [...arr1,...arr2]
... 不能展开一个对象
{...Object}可以复制一个对象
babel+React 可以让...去展开一个对象但只限于标签内

对props进行限制

通过class.propTypes去限制版本15之前自带版本16之后需要引入prop-types来进行处理 e.g. name:PropTypes.string.isRequired
class.defaultProps 设定默认值 props是只读的

props的简写方式在class中添加 static 属性即可

day_04

构造器与props

在React中，构造器仅用于以下两种情况

通过给this.state赋值对象来初始化内部state
为事件处理函数绑定实例

构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

函数式组件使用props

函数式组件只能使用三大属性中的props（16版本后可通过hooks使用别的属性）通过function（props）接受

refs

组件内的标签可以定义ref属性来标识自己

学习React之路😁