初识React

1. 什么是React

React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案
遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效
使用虚拟 DOM 来有效地操作 DOM，遵循从高阶组件到低阶组件的单向数据流
帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面
react 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回需要展示的内容

React 特性有很多，如：
JSX 语法
单向数据绑定
虚拟 DOM
声明式编程
Component
React 存在的优势：
高效灵活
声明式的设计，简单使用
组件式开发，提高代码复用率
单向响应的数据流会比双向绑定的更安全，速度更快

3. 什么是JSX

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力

JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本

4. React创建元素的方法？

React.createElement()
参考答案:
面试官：React构建组件的方式有哪些？区别？ | web前端面试 - 面试官系列

5. class组件和函数组件区别

1. class组件是有状态的组件，可以定义state状态，函数组件无状态
2. class组件有生命周期的，函数组件无生命周期
3. class组件是由this对象，函数组件没有this对象
4. 组件调用： class组件实例化后调用render方法调用，函数组件直接调用的。
5. class组件内部的话，render方法return返回渲染jsx模板，函数组件直接返回即可
6. ref获取子组件的对象，class组件可以直接获取到的，函数组件无法直接获取到。
7. 绑定bind改变this指向，只适用于class组件

6. React 事件绑定的方式

React 事件绑定属性的命名采用驼峰式写法， 采用 JSX 的语法传入一个函数作为事件处理函数

事件绑定函数的方式

1. 直接写函数名字{callback}，

2. 可以使用bind方法绑定调用 {callback.bind(this)}

7. 事件处理方法this指向改变

当我们把事件函数写成普通函数的形式时 , 调用函数使用state变量会报错，提示state变量不存在，

是因为

• 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

• render函数是被组件实例调用的，因此render函数中的this指向当前组件

解决方法： 1. 把普通函数改成箭头函数 2. 调用函数的时候使用bind方法改变this指向

8. React事件处理方法传值

1. 调用的时候定义一个箭头函数 函数中调用方法传递参数据

   1. <button onClick={()=> this.del(index) }>
   2. 点击
   3. </button>

   1. 第二种方法 bind方法传递参数

      1. <button onClick={this.del.bind(this,index) }>
      2. 点击
      3. </button>

9 React如何获取表单数据

1. 给文本框绑定value属性，value属性绑定state中定义的变量
2. 给表单绑定onChange事件，调用定义的方法
3. 在方法中我们获取e.target.value属性，赋给value属性绑定的变量

10. React条件渲染方法有哪些

1. if-else的条件渲染方法
2. 三元运算符进行条件渲染，可以缩短代码量
3. switch的多条件渲染效果
4. HOC条件渲染

11. React怎么实现列表渲染

react中可以使用map方法渲染列表，return对应的页面结构即可， React 在渲染列表时，会要求开发者为每一个列表元素指定唯一的 key ，我们尽量不要使用index索引值作为key，如果对数据进行：逆序添加、逆序删除等破坏顺序操作：可能会引起页面更新错误问题。

12. React中key的作用是什么?

key是虚拟DOM对象的唯一标识，在更新显示时key起到极其重要的作用 ，简单的来说就是为了提高diff的同级比较的效率，避免原地复用带来的副作用

react采用的是自顶而下的更新策略，每次小的改动都会生成一个全新的的vdom，从而进行diff，如果不写key，就会发生本来应该更新却没有更新
参考答案: 面试官：React中的key有什么作用？ | web前端面试 - 面试官系列

13. React组件样式的定义方式

1. 外联样式

   定义css文件，在组件中通过import导入css样式，

   import "App.css"

2. 内联样式

   React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用

   定义一个style属性，属性中定义对应的css样式即可，比如style={{fontSize:'15px'}}

   外层花括号是语法，内层花括号是对象边界符

14. Props校验数据类型

array（数组）、bool（布尔值）、func（函数number（数字）、object（对象）、string（字符串）