1.为什么React选择了JSX？
React认为渲染逻辑本质上与其他UI逻辑存在内在耦和
- 比如UI组件需要绑定事件（button，a原生等）
- 比如UI中需要展示数据状态
- 比如在某些状态发生改变时，又需要改变UI
2.React开发的三个依赖包是什么？分别有什么作用？
- react：react核心代码
- react-dom：dom渲染相关，之前这个包是在react中，后来react团队支持了native端，react-dom支持web和native端的渲染，一个是代码体积，另一个是对不同端的特殊操作？所以把渲染相关的单独抽出来。
- babel：babel作用是把非js代码转换为浏览器识别的js代码，包括ts,.vue,.jsx,es6等转换诶普通js,在react项目中则是负责把jsx相关代码转换为js
js
复制代码
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
3.React如何封装组件，组件里面包含哪些内容？
引入react依赖后，通过React.Component为基类，创建基于它的组件对象，使用es6语法：
- 组件继承extends
- 类组件中必须实现一个render函数，作为该组件要展示的html内容
- html中，会使用数据和方法
- 组件构造函数内，存放组件需要的变量，组件内的变量分为：用于界面渲染的和不用于界面渲染的。用于界面渲染的，我们在指定的变量state中，用对象形式存储。
- 修改变量，也通过React.Component原型上的setState来修改。
- 组件需要的方法，需要手动处理this的绑定，将this显示绑定为组件实例：render中元素绑定方法的时候bind,或者在组件构造函数属性内，显示绑定
4.在进行函数绑定时，如何进行this关键字的绑定？
在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this
- 如果我们这里直接打印this，也会发现它是一个undefined
为什么是undefined呢？
原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数；
- 而它内部调用时，并不知道如何绑定正确的this 相当于 const click = this.click click(),此时走的是默认绑定
如何解决this的问题呢？
- 方式一：bind给btnClick显示绑定this； 方法是普通函数。显示绑定，JSX给的是方法的引用，真正执行this是全局，babel严格模式下是undefined,因此，需要在constructor中bind(this)【繁琐】（此方法传参比较麻烦）
针对这种方式，在下面的例子中，需要在constructor里面写this.btnClick.bind(this)
-
方式二：使用ES6 class fields语法 方法是箭头函数。箭头函数中没有this，指向的是调用方，组件实例。 这种方式能生效，是因为btnClick2此时相当于当前这个类的一个字段，一个属性，那么此时箭头函数的this会指向外层的实例
-
方式三：事件监听时传入箭头函数（个人推荐） 方法是普通函数。JSX绑定事件时，传递箭头函数，箭头函数内直接this.执行普通方法（隐式绑定，指向实例）。【必须掌握，用得最多，传参友好】 这种方式首先必须要调用，然后this走的是隐式绑定，指向的是当前的实例
5.React如何进行列表数据的展示？回顾数组的常见高阶函数
6.JSX如何绑定数据？如何绑定内容，属性，有哪些规则
7.JSX绑定事件如何给函数传递参数？
JSX中event对象，与传统event对象有点区别，react对浏览器的event对象做了包装。
bind传参数问题
存在这样的问题，实参第一位丢失，实参从第二位开始，依次赋值给函数形参第一位开始，形参最后一位是event对象。
JSX中事件参数传递方式
只掌握箭头函数形式即可，最好用
