react的diff算法
diff算法的作用？
什么是调和？
什么是diff算法？
通过同级比较
通过组件间比较
通过key属性进行比较
react的fiber算法
在react 16之后发布的一种react 核心算法，**React Fiber是对核心算法的一次重新实现**(官网说法)。之前用的是diff算法。
在之前React中，更新过程是同步的，这可能会导致性能问题。
当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为JavaScript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿.
React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。
react的特点和优势
(1) 虚拟DOM
我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作。而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道
(2) 组件系统
react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
那么什么是组件呢？
组件指的就是同时包含了html、css、js、image元素的聚合体
使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式
(3) 单向数据流
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了
(4) JSX 语法
在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx
react中如何定义组件和元素
函数式组件
类组件
函数式组件和类组件的区别
函数组件没有生命周期，没有 state 状态, （需要使用useState）函数组件中传入的参数是 props ,函数组件中可以使用hooks
类组件有完整的生命周期，拥有 state 状态, 类组件中不能使用hooks
优先使用函数组件
react中使用样式的方式
style属性内联样式
className
使用 classnames 包
使用 styled-components 框架
react组件的状态有几种
构造器 constructor
对象
组件内状态state
其他组件传过来的props
全局状态redux等
如何定义props的默认值以及数据类型
类组件中使用 static defaultProps = {}
函数组件可以在组件外部使用
xxx.defaultProps = {}
如何使用插槽和具名插槽
类组件中使用 this.props.children
函数组件中使用 props.children
具名插槽就是将要插入的部分写成对象
如何改变state的值
this.setState()
有两个参数 第一个参数可以是对象，也可以是函数，函数的话参数分别为 prevState 和 props，一般当需要用到上一个状态时使用函数参数 第二个参数是回调函数，执行的是当 state 改变完成后的命令
setState是同步还是异步的
在定时器中和原生JS中是同步的， 在组件中的合成事件中和生命周期中是异步的
父子组件哪个先render，哪个先componentDidMount
父组件先 render 子组件先 componentDidMount
父子组件如何传参
父传子
通过自定义属性传参 通过组件通信进行传参 createContext，解构出provide和consumer 通过插槽进行传参
子传父
在父组件中定义一个自定义的事件 将事件作为props传入到子组件中 子组件中通过合成事件或者生命周期执行事件
redux
什么是受控组件，怎么使用
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。 input 中含有 value 属性的为受控组件
可以在 input 中加入 onChange 合成事件
事件中可以通过 setState 将 e.target.value 传入到 state 中去
什么是非受控组件，怎么使用
非受控组件就是表单数据将交由 DOM 节点来处理
表单数据将不会传入组件的状态中
通过从 react 中解构出的 createRef 取得 input 的 DOM 节点，再取得 value 值
事件处理如何改变this指向
- 直接在render里写行内的箭头函数(不推荐)
- 在组件内使用箭头函数定义一个方法(推荐)
- 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用
onClick={this.handleClick.bind(this)}(不推荐) - 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)
事件处理如何传参
- 在
render里调用方法的地方外面包一层箭头函数 - 在
render里通过this.handleEvent.bind(this, 参数)这样的方式来传递 - 通过
event传递 - 比较推荐的是做一个子组件, 在父组件中定义方法，通过
props传递到子组件中，然后在子组件件通过this.props.method来调用
react 16.3版本之前的生命周期有哪些
初始化 constructor 挂载阶段 (UNSAFE_)componentWillMount render componentDidMount 更新阶段 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate 结束挂载阶段 componentWillUnmount
16.4版本生命周期较之前有何变化
废弃了 (UNSAFE_)componentWillMount componentWillReceiveProps componentWillUpdate
新增了 getDerivedStateFromProps getSnapshotBeforeUpdate
shouldComponentUpdate的作用
可以用来解决相同状态重复更新的问题，不会重新 render
PureComponent的作用
可以用来替代 shouldComponentUpdate 的作用
PureComponnet里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话，就不会去重新render了
react中如何做跨组件传参，具体怎么实现
状态提升
通过自定义的事件将组件中的参数传入到共同的父组件 再通过父组件将参数传到另外一个子组件
什么是高阶组件，高阶组件的作用是什么
HOC 高阶组件是一个函数，函数中传入的参数为一个组件，返回一个新的组件，作用是可以给组件增加新功能
Portal是什么，能做什么，怎么做
Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法,
在 react-dom 中解构出 createPortal 方法 , 第一个参数传入需要更改位置的组件， 第二个参数是目标位置节点
redux有哪几部分组成，它的状态流向是怎么样的
actionCreator store reducer 三部分组成
react 组件通过 actionCreator 将action dispatch 给store , store 再将 state 和 action 传入到 reducer，reducer再返回 newState 给 store，store再将 state 传给 react 组件
什么是纯函数
入参相同，返回值也相同
入参不能改变
里面的函数只能是同步函数
中间件的作用
改造store.dispatch，解决了在actionCreator的异步操作中返回扁平化对象的问题
react-redux的作用
连接react组件和redux
react-redux中的connect是干什么的
connect 是一个由react-redux中解构出来的一种方法，返回的是一个高阶组件，有两个参数，第一个参数用来将redux中的state转化为props中的属性，第二个参数用来将dispatch转化为props中的属性
redux-thunk是什么
redux-thunk 可以让 store.dispatch 变成可以接收一个函数/一个对象的中间件
react-router-dom中常用到的组件有哪些
BrowserRouter Route Link Switch Redirect
什么是包容性路由，什么是排他性路由，react默认是哪种，怎么改变
包容性路由就是指在路由的path匹配过程中，如果匹配到了一个地址，会继续进行匹配其他的路由地址 排他性路由是指如果匹配到了第一个路由地址，则就不再进行匹配 react默认为包容性路由 可以通过在路由外层套一层Switch组件改变
exact的作用
可以将路由的path进行精确匹配
重定向怎么做
通过 Redirect 组件进行重定向
在Route中渲染组件的方式有哪些，他们有什么区别
component 可以渲染类组件和函数组件 children 不管路径有没有被匹配，都会被渲染, 不能渲染类组件 , 一般情况下都会和Switch一起使用 render 只能渲染函数组件，不能渲染类组件 直接在Router里面使用实例化标签 没有 props
在react中路由传参的方式有哪些，分别怎么接收
对象传参 通过 useLocation 接收
字符串传参 通过useLocation 或 URLSearchParams分离出search 通过 props.match.params 接收
withRouter是什么
withRouter是一个高阶组件，可以让路由组件拿到路由信息
react-router-dom中有哪些Hooks，作用是什么
useLocation 返回路由的Location信息 useHistory 返回路由的History信息 useParams 返回路由的Params信息 useRouteMatch 返回路由的Match信息
