【react学习笔记】jsx语法规则、创建函数式组件及类式组件、组件实例的三大核心属性

https://www.bilibili.com/video/BV1wy4y1D7JT?from=search&seid=14059334021444164170&spm_id_from=333.337.0.0

创建虚拟DOM：

const VDOM = React.createElement('div', {id:'title'}, '标签内容')
// 等价于
const VDOM = <div id="title">标签内容</div> // 这里不要加引号，不是字符串

jsx语法规则：

1. 定义虚拟DOM时，不要写引号。
2. 标签中混入【JS表达式】时要用{}（注意区分JS表达式和JS语句）。
   （1）表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方；
   （2）语句（代码）：例如if判断 for循环 switch判断等等。
3. 样式得类名指定不要用class，要用className。
4. 内联样式，要用style={{key:value}}得形式去写（其中最外层{}表示包含变量，内层{}表示一个对象）。
5. 只有一个根标签，标签必须闭合。
6. 标签首字母
   （1）若小写字母，则转化为html中同名标签，若html中无此标签则报错；
   （2）若大写字母，react就去渲染对应的组件，若组件没有定义，则报错。

函数式组件：

<script type="text/babel">
// 创建函数式组件
function MyComponent() {
	console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式
	return <h2>函数式组件 适用于简单组件的定义</h2>
}
// 渲染组件到页面
ReactDom.render(<MyComponent/>, document.getElementById('test'))
/*
	执行了ReactDom.render(<MyComponent/>...)之后，发生了什么？
	1.React解析组件标签，找到MyComponent组件。
	2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面中。
*/
</script>

类式组件：

• 类中的构造器不是必须写的，要对实力进行一些初始化的操作，如添加指定属性时才写。
  
  继承类（了解原型对象、原型链的关系以及this指向）：
• 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
• 类中定义的方法，都是放在类的原型对象上，供实例去使用。
  

// 创建类式组件 
// React.Component是react内置的一个类，创建类式组件必须继承
// 必须写render且有返回值
class MyComponentextends React.Component {
	render() {
		return <h2>类式组件 适用于复杂组件的定义</h2>
	}
}
// 渲染组件到页面
ReactDom.render(<MyComponent/>, document.getElementById('test'))
/*
	执行了ReactDom.render(<MyComponent/>...)之后，发生了什么？
	1.React解析组件标签，找到MyComponent组件。
	2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法。
	3.将render返回的虚拟DOM转为真是DOM，随后呈现在页面中
*/

组件实例的三大核心属性

1.state

理解：
1） state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
注意：
1）组件中render方法中的this为组件实例对象
2）组件自定义的方法中this为undefined，如何解决？
a.强制绑定this: 通过函数对象的bind()
b.箭头函数
3）状态数据，不能直接修改或更新，关键字：setState

2.props

理解：
1）每个组件对象都会有props（properties的简写）属性
2）组件标签的所有属性都保存在props中
3）构造器中的props

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

编码操作：
1）内部读取某个属性值：this.props.name（react v15.5开始弃用）
2）对props中的属性值进行类型限制、必要性限制（使用prop-types库进行限制，需要引入prop-types库）及默认值设置

3）扩展属性：将对象的所有属性通过props传递

<Person {...person} />

3.refs与事件处理

理解：组件内的标签可以定义ref属性标识自己
编码：
1）字符串形式的ref（存在效率问题，后续版本可能被移除）

<input ref="input1" /> 

2）回调形式的ref

<input ref={ c=> this.input1 = c } /> // c即当前节点（currentNode）

3）createRef创建ref容器（推荐）

//React.createRef调用后可以返回一个容器，改容器可以存储被ref所标识的节点，专人专用
myRef = React.createRef()
<input ref={ this.myRef } />

事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写）
2. React使用的是自定义（合成）事件，而不是使用原生DOM事件-----为了更好的兼容性
3. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）-----为了高效
4. 通过event.target得到发生事件的DOM元素对象-----不要过度使用ref

高阶函数

定义：如果一个函数符合下面两个规范中的任何一个，那该函数就是高阶函数

1. 若A函数接受的参数食一个函数，那么A就可以称之为高阶函数
2. 若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数
   常见的高阶函数有：Promise、setTimeout、arr,map()等等
   函数里的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式