react从0到入门，基础自学版本

本人一直是用的vue进行开发，应公司内部需求，后续需要并行使用react框架进行开发，即开始从0学习react框架，以下就是我学习的心得，通过笔记的方式记录学习的内容。内容会根据每次学习的情况进行更改，直至学完为止。

一、创建react项目

注意：使用的是vscode编辑器
1、创建脚手架：（需要手动跟新，自己重新npm最新版本的脚手架）
例：npm install -g create-react-app
2、创建一个项目
1）全局安装：
ccreate-react-app one-app
2）不全局安装（临时安装，每次安装都是最新版的脚手架）
npx ccreate-react-app one-app
3、rcc快捷键出类组件基本框架，rfc函数组件基本框架（需要安装ES7插件）
例如输入rfc，出现函数组件基本框架结构

二、编写第一个react项目

在index.js文件中，将元素插入到根元素节点中。

1、创建第一个类组件

2、创建第一个函数组件

总结

• 组件命名必须是大写的。
• render()函数是必需存在的且不能改名。
• return后面若换行需要加上（）。
• return中只能有一个根元素。

三、组件嵌套

四、样式写法

• {} 中可识别变量，表达式
• class要写成className形式，部分属性会发生变更
• 样式可写行内样式也可外部引入css文件

五、事件处理

前面添加on，即是事件处理函数
例如：
onClick 点击事件
onMouseOver 鼠标经过事件

总结：一共有四种事件绑定的写法，最推荐最后一种，能够传入参数，并且this指向不会出现问题。
特点：
1、react中并不会真正的绑定事件到每一个具体的元素身上，而是采用事件代理的模式；（通过冒泡到根节点上，占内存小）
2、和普通浏览器一样，事件handler会自动传入一个event对象
额外扩展知识点：（ bind、call和apply方法的区别）
bind、call和apply都是JavaScript中用于改变函数执行上下文的方法，它们的区别如下：

1. bind方法：bind方法会创建一个新的函数，并将原函数的执行上下文绑定到指定的对象。bind方法不会立即执行函数，而是返回一个绑定了执行上下文的新函数。这样可以在稍后调用该函数时，仍然保持原来的执行上下文。
2. call方法：call方法会立即执行函数，并将指定的对象作为执行上下文。除了第一个参数是执行上下文外，call方法可以接受多个参数，这些参数会作为原函数的参数传递进去。
3. apply方法：apply方法与call方法类似，也是立即执行函数并改变执行上下文。不同之处在于，apply方法接受一个数组作为参数，数组中的每个元素会作为原函数的参数传递进去。

总结一下：

• bind方法返回一个新函数，并绑定了指定的执行上下文。
• call方法立即执行函数，并将指定的执行上下文和参数传递进去。
• apply方法立即执行函数，并将指定的执行上下文和参数数组传递进去。

六、组件的导入与导出（附加ES6知识）

一个js文件中只能有一个默认导出，但是可以有多个具名导出。
例如：
子组件中：

export function Profile() {//具名导出的方式
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {//默认导出的方式
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
    </section>
  );
}

父组件：

import Gallery from './Gallery.js'; //默认导入的方式
import { Profile } from './Gallery.js';//具名导入需以结构的方式

export default function App() {
  return (
    <Profile />
  );
}

总结：

语法	导出语句	导入语句
默认	export default function Button() {}	import Button from ‘./Button.js’;
具名	export function Button() {}	import { Button } from ‘./Button.js’;

七、ref

作用：给标签或者组件命名，拿到该标签或者组件，从而拿到值。
旧写法：（过时）

取值：ref=“name”
拿值：this.refs.name.value
新写法：

取值： myref = React.createRef(); ref={this.myref}
拿值：{this.myref.current.value

八、状态（state)（类组件）

状态就是组件描述莫种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了不同的状态下使组件的显示不同（自己管理）。
设置数据：
state={参数名：参数值}，state固定写法
修改数据：
this.setState({参数名：参数值})

注意：

• state可另外一种写法，写在构造函数中
  - setState可一次性更新多个状态
  例子：渲染列表
  
  使用jsx写法，可直接在js中嵌入html，{}内为变量。key属性必存在且值不唯一（diff算法，为了列表的复用和重排，设置key值，提高性能）。
  拓展：dangerouslySetInnerHTML属性将标签识当成html识别
  
  
  状态特点：

• setState处在同步的逻辑中，异步跟新状态，异步跟新真实dom
  
  结果：1 1 1

• setState处在异步的逻辑中，同步更新状态，同步跟新真实dom
  
  结果：2 3 4

• setState接受第二个参数，第二个参数是回调函数，状态和dom更新完后会被促发
  
  结果：2 2 2

九、属性（props）（类组件与函数组件）

一、基本使用

props是正常外部传入的，组件内部可以通过一些方式来初始化设置，属性不能被组件自己更改，但是可以通过父组件主动重新渲染的方式来传入新props。
父组件：

组件中添加属性,{}中可识别js代码，并且识别布尔值需要使用{}。
子组件：（类组件写法）

通过this.props拿到父组件传递过来的参数
子组件：（函数组件写法）


通过函数接收父组件传递过来的参数props

二、属性验证与默认属性

类组件式写法，在父组件中的子组件传参，在子组件中设置属性验证与默认属性设置
父组件

子组件

结果：

propTypes：属性类型
defaultProps：默认属性

1. 引入’prop-types’包
2. 设置静态属性propTypes，通过调用方法来限制输入 的类型是什么
3. 设置静态属性defaultProps，来设置默认属性是什么
   ** 函数式组件**
   父组件：
   

子组件：

注意：这里的属性验证的写发只能写在函数外面，即是类名.属性的方式。

结果：

属性vs状态
相似点: 都是纯js对象，都会触发render更新，都具有确定性(状态/属性相同，结果相同)
不同点:
1.属性能从父组件获取，状态不能
2.属性可以由父组件修改，状态不能
3.属性能在内部设置默认值，状态也可以，设置方式不一样
4.属性不在组件内部修改，状态要在组件内部修改
5.属性能设置子组件初始值，状态不可以
6属性可以修改子组件的值，状态不可以
注意：
1、state 的主要作用是用于组件保存、控制、修改自己的可变状态。 state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修击。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。 state 中状态可以通过 this.setstate 方法进行更新，setstate 会导致组件的重新渲染。
2、props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。
3、没有 state 的组件叫无状态组件 (stateless component)，设置了 state 的叫做有状态组件 (statefulcomponent)。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

十、表单中的受控与非受控组件

非受控组件：

使用ref来从DOM节点中获取表单的数据，就是非受控组件。
例如：设置输入框的默认值

注：通过value来设置默认值，发现设置之后，input框中的内容不可变（可想像成组件传参方式）。所以设置默认值可以采用defaultValue设置（第一次收控制，之后并不受控制）


注：若想给子组件传递表单数据，使用这种方式是不会动态更新的，因为重新渲染react组件是通过state的方式，即使用受控组件的方式。

受控组件：

value受控，通过结合state的方式来控制变化，结合onChange监听函数（与onInput效果一致），一输入即促发，重新设置且渲染输入框的值。
** 总结**
受控：value 非受控：defalutValue
onChange等同于onInput
注意：广义上的受控与非受控的说法：react组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则为非受控组件。

十二、父子组件通信

父组件向子组件传递数据，子组件中触发父组件中的方法。
父组件：

通过写的event事件，传递给子组件
子组件：

子组件通过this.props拿到传递过来的数据，直接在点击触发该函数事件。
总结：
父传子：属性
子传父：回调函数

例一、

表单域受控组件：


通过父组件state封装表单域

表单域ref组件：


通过父组件ref获取子组件参数，结合子组件state封装表单域

十三、非父子组件通信

一、订阅发布模式：

• 订阅者与发布者都是多对多模式
• 找一个公共的调度中心，使得参与的组件都可调用到
• 订阅者要在发布者之前订阅，订阅者即拿到发布者传递的信息，等待被执行。
• 发布者发布消息，将所有订阅的消息都执行，调用回调函数。
  二、context状态树传参：