理解

React是一个流行的JavaScript库，用于构建用户界面。它基于组件化的思想，使得开发者可以将复杂的UI拆分成一系列独立、可重用的组件。React采用虚拟DOM和高效的渲染算法，能够最小化页面重绘，提高性能。

组件化

React将用户界面划分为独立的组件，每个组件都有自己的状态和属性。这种组件化的开发方式使得代码更加模块化、可维护性更高。

函数式组件（适用于简单组件）

类式组件（适用于复杂组件）

组件实例对象的三大属性

• state是组件实例对象最重要的属性，必须是对象的形式

• 组件被称为状态机，通过更改state的值来达到更新页面显示（重新渲染组件）

• 组件render中的this指的是组件实例对象

• 状态数据不能直接赋值，需要用setState（）

• 组件自定义方法中的this为undefined，怎么解决？

  ①将自定义函数改为表达式+箭头函数的形式（推荐）
  ②在构造器中用bind（）强制绑定this

  props就是在调用组件的时候在组件中添加属性传到组件内部去使用

构造器问题

构造器仅用于以下两种情况：

• 通过this.state赋值对象来初始化内部的state

• 为事件处理函数绑定实例（就是上面的this.changeWeather=this.changeWeather.bind(this)）

• 每个组件都会有props属性

• 组件标签的所有属性都保存在props

• 组件内部不能改变外部传进来的props属性值

虚拟DOM

React使用虚拟DOM来提高性能。它会在内存中创建一个虚拟的DOM树，然后通过比较虚拟DOM树和实际DOM树的差异，最小化DOM操作，从而提高页面渲染的效率。

虚拟DOM中的key的作用：

当状态中的数据发生改变时，react会根据【新数据】生成【新虚拟DOM】，随后react会进行【新虚拟DOM】和【旧虚拟DOM】的diff算法比较，具体的比较规则如下：

• 若【旧DOM】中找到了与【新DOM】相同的key，则会进一步判断两者的内容是否相同，如果也一样，则直接使用之前的真实DOM，如果内容不一样，则会生成新的真实DOM，替换掉原先的真实DOM
• 若【旧DOM】中没找到与【新DOM】相同的key，则直接生成新的真实DOM，然后渲染到页面

用index作为key可能引发的问题

1. 若对数据进行：逆序添加、逆序删除等破坏顺序的操作时会产生不必要的真实DOM更新，造成效率低下
2. 如果结构中还包含输入类的dom，会产生错误dom更新，出现界面异常

开发中如何选择key

1. 最好选中标签的唯一标识id、手机号等
2. 如果只是简单的展示数据，用index也是可以的

JSX语法

React使用JSX语法来描述用户界面。JSX是一种将HTML和JavaScript结合的语法扩展，使得开发者可以在JavaScript代码中直接编写HTML结构。

• 定义虚拟dom时不要用引号
• 标签中引入js表达式要用{}
• 如果在jsx要写行内样式需要使用style={{coler：red}}形式
• 样式的类名指定不能写class，要写className;
• 只有一个根标签
• 标签必须闭合
• 标签首字母
  ①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
  ②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

生命周期方法

React组件有一系列的生命周期方法，可以在组件的不同阶段执行特定的操作。例如，componentDidMount方法在组件挂载到DOM后执行，componentWillUnmount方法在组件从DOM中移除前执行。

挂载时：先执行构造器（constructor）=》组件将要挂载（componentWillMount）=》组件挂载渲染（render）=》组件挂载完成（componentDidMount）=》组件销毁（componentWillUnmount）

组件内部状态更新：组件是否应该更新（shouldComponentUpdate）=》组件将要更新（componentWillUpdate）=》组件更新渲染（render）=》组件更新完成（componentDidUpdate）

强制更新：调用this.forceUpdate()，这个api和setState一样都是react自带的，一般这个强制更新很少用，它的执行流程就是比上述的正常更新流程少一步询问是否更新（shouldComponentUpdate）

父组件重新render：调用组件将要接收新props（componentWillReceiveProps） =》组件是否应该更新（shouldComponentUpdate）=》组件将要更新（componentWillUpdate）=》组件更新渲染（render）=》组件更新完成（componentDidUpdate）