React（一）

第一章：React入门

1、React的特点

1. 声明式编程
2. 组件化编程
3. React Native编写原生应用
4. 高效（优秀的Diffing算法）
5. 单向数据流

2、React高效的原因

1. 使用虚拟（virtual）DOM，不总是直接操作页面真实DOM。
2. DOM Diffing算法，最小化页面重绘。

3、相关的js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库。

4、虚拟DOM与真实DOM

⭐ React提供了一些API来创建一种“特别”的一般js对象。

const VDOM = React。createElement（‘xx’,{id:‘xx’},'xx）
上面创建的就是一个简单的虚拟DOM对象

⭐ 虚拟DOM对象最终都会被React转换为真实的DOM。
⭐ 我们编码时基本只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面。

关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM。呈现在页面上。

5、jsx语法规则

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

6、模块与组件、模块化与组件化的理解

1. 模块

1、理解：向外提供特定功能的js程序，一般就是一个js文件
2、为什么要拆成模块：随着业务逻辑增加。代码越来越多且复杂
3、作用：复用js，简化js的编写，提高js运行效率

2. 组件

理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image）
为什么要用组件：一个界面的功能更复杂
作用：复用编码，简化项目编码，提高运行效率

第二章：Reac面向组件编程

1、自定义组件

1. 函数式组件

function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))

2. 类式组件

class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))

2、组件的三大核心属性
2.1、state

1. state是组件对象最终要的属性，值是对象（可以包含多个key-value的组合）
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
3. 组件中的render方法中this为组件实例对象
4. 状态数据，不能直接修改或更新
5. 组件自定义的方法中this为undefined，如何解决？

a)强制绑定this；通过函数对象的bind()
b)箭头函数

注意问题：

1. 构造器调用几次？——1次
2. render调用几次？——1+n次 1是初始化的那次 n是状态更新的次数
3. 事件函数放在类组件的原型上，供实例使用
4. 由于事件函数式作为onClick的回调，所以不是通过实例调用的，是直接调用
5. 类中的方法默认开启了局部的严格模式，所以事件函数的this为undefined
6. 状态必须通过setState进行更新,且更新是一种合并，不是替换
7. 在类组件里面自定义方法——要用赋值语句的形式+箭头函数

2.2、 props

1. 理解

1、每个组件对象都会有props（properties的简写）属性
2、组件标签的所有属性都保存在props中

2. 作用

1、通过标签属性从组件外向组件内传递变化的数据
2、注意：组件内部不要修改props数据

3. 编码操作

1、内部读取某个属性值
this.props.name
2、对props中的属性进行类型限制和必要性限制
Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number. }
3、扩展属性：将对象的所有属性通过props传递
<Person {...person}>
4、默认属性值
Person.defaultProps = { age: 18, sex:'男' }
5、组件类的构造函数
constructor(props){ super(props) console.log(props)//打印所有属性 }

区别组件的props和state属性
1）state：组件自身内部可变化的数据
2）props：从组件外部向组件内部传递数据，组件内部只读不修改

2.3、refs

1. 理解

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

2. 编码

1、字符串形式的ref
<input ref="input1"/>
2、回调形式的ref
<input ref={(c)=>{this.input1 = c}}
3、createRef创建ref容器
myRef = React.createRef() <input ref={this.myRef}/>

3. 事件处理

1、通过onXxx属性指定事件处理函数（注意大小写）
（1）React使用的是自定义（合成事件），而不是使用的原生DOM事件
（2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
2、通过event。target得到发生事件的DOM元素对象