React基础知识学习

React是由Facebook进行维护的。

React是什么？

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库，使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件“。

React语法

jsx语法

1. React框架主要使用jsx语法（js混合html一起书写的）。但是它又和html语法不太一样，和XML语法比较相似。
   ①标签必须要有结束符号(例如:,无论是单标签还是双标签都要有这个闭合符号/)。
   ②标签的属性一律使用驼峰命名法(例如:html5中的data-index属性在这里提倡dataIndex这种写法)。
   ③类名必须用className进行命名，才会生成class。 (注意：vue.js框架也支持jsx语法)
2. jsx语法的本质？

//不使用jsx语法
//上面的jsx语法会最终编译成下面的代码

打印出title的值：console.log(title)
注意：vue中也有这样的写法)
3. jsx语法上的一些api?

得到如下结果：

例子：用react实现if方法

在react中，想要重新渲染页面，只有一个方法，那就是重新执行render函数。
在类组件中，存在一些生命周期，修改某一项值，会触发render的修改。
①修改类组件中的state(setState)会触发页面的更新。
②修改类组件中的props会触发组件的更新。

注意：

函数组件无法进行页面的重新渲染，类组件通过修改某一项值可以进行页面的重新渲染。

React生命周期(定义组件都以类的方式去定义组件，因为类组件有生命周期，函数组件没有生命周期)

React生命周期主要包含三个阶段：初始化阶段、运行中阶段和销毁阶段，在React不同的生命周期里，会依次触发不同的钩子函数。

一、初始化阶段

1. 设置组件的默认属性

static defaultProps = {
    name: 'sls',
    age：23
};
//or
Counter.defaltProps = {name:'sls'}

2. 设置组件的初始化状态

constructor () {
    super();
    this.state = {number:0}
}

3. componentWillMount()

组件即将被渲染到页面之前触发，此时可以进行开启定时器、
向服务器发送请求等操作

4. render()

组件渲染

5. componentDidMount()

组件已经被渲染到页面中后触发:此时页面中有了真正的DOM元素，
可以进行DOM相关的操作

二、运行中阶段

1. componentWillReceiveProps()

组件接收到属性时触发

2. shouldComponentUpdate()

当组件接收到新属性，或者组件的状态发生改变时触发。
组件首次渲染时并不会触发。

shouldComponentUpdate(newProps,newState) {
    if(newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，
//返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己
的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执
行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM
进行结构和属性的比较，决定组件是否需要重新渲染。

但是这样的操作会造成很多性能浪费，所以我们开发者可以根据项目
的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而
优化性能。

例如React中就提供了一个PureComponent的类，当我们的组价
继承于它时，组件更新时就会默认先比较新旧属性和状态，从而
决定组件是否更新。值得注意的是，PureComponent进行的是浅比
较，所以组件状态或属性改变时，都需要返回一个新的对象或数组
。

3. componentWillUpdate()

组件即将被更新时触发

4. componentDidUpdate()

组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作。

三、销毁阶段

1. componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件等等。

四、整个生命周期代码

进行打印：

this指向

this的几种不同的使用场景，也就是函数调用时this的指向：
①纯函数调用this指向Window。
②事件调用:谁调用这个函数，this就指向谁。
③定时器调用:在定时器中,this指向window。
④构造函数调用:构造函数生成一个新的对象，this指向新建的这个对象。

apply()、call()、bind()三者都能改变this的指向，且第一个参数都是this的指向对象。第二个参数有所区别：

call的第二个参数往后:call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到第一个参数后面。
apply的第二个参数往后:所有参数都必须放进一个数组里面传进去。
bind除了返回的是一个新函数以外，你必须调用它才会被执行。它的参数和call一样。
当然，三者的参数不限定是String，允许是各种类型，包括函数、object等等！
实例：

react核心代码之this指向

   点我

事件处理中的this

'use strict' //严格模式，es6当中推出来的，在严格模式中，
//禁止变量未定义就直接使用，以及规定了，全局调用的函数的this的指向指向undefined。

注意：事件处理函数是没有办法传参的(在原生中，在vue或者react中，别人已经封装过了，可以传参)！

在react框架的事件处理函数中(例如：点击事件原生是onclick全小写，而react使用驼峰命名法onClick,vue是(@click))。原因是事件处理函数已经被react框架进行了封装。原生的点击事件onclick是无法进行传参的。而react和vue中的点击事件是可以传参的。

//以vue为例，进行源码的解读

不足之处，请多多指教