Redux是JavaScript的状态容器，提供可预测化的状态管理，相当于vue中的vuex，可以跨组件，跨页面推送数据，应用的场景如：购物车，会员登录等功能模块，
基本的思想就是将整个应用的state保持在一个单一的store中，store是一个简单的javascript对象，而改变应用state的唯一方法就是应用中触发actions，然后为这些actions编写resuces来修改state。整个state转化是在reduces中完成，并且不应该有任何副作用
redux-thunk可以用来延迟action的派发（dispatch），这里可以处理异步action的派发（dispatch）
redux是没有采用异步功能：（state+action），action是不支持异步请求（类似于vuex里面的mutations），开放了这个接口，万一你想在action里面发送请求，扩充改功能，redux——thunk就是redux的的一个中间件，就能让redux支持异步请求
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。相当于vue的vuex，可以跨组件、跨页面推送数据。应用场景如：购物车、会员登录等功能模块。
Redux 由 Flux 演变而来，避开了 Flux 的复杂性。 不管你有没有使用过它们，只需几分钟就能上手 Redux。
Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作用。
一般建议是将所有的数据统一放在redux里面，如果分别放在state，props，或redux里面的话在后期维护不容易找到问题的源头，如果全部放在redux里面的话，出了错误只要按照一个套路去处理就行了为了在后期的维护或者对项目新功能开发，也很友好就用对项目进行重构
react的代码其实在浏览器中是无法运行的，我们借助脚手架通过转化吧他转换成ES5，然后才让它能够在浏览器中运行，而vue是在webpack中借助vue-loader来转化的，让它能够在浏览器中运行 ，但react里面没有react-loader想对应的webpack-loader来帮它进行转换，而是借助了babel里面的 preset-react来帮助完成转化
调和 因为setState是一个异步过程，所以可能在拿值得时候拿到的可能是修改前的值
1）首先，React 将setState()方法中传入的参数对象与组件当前的状态合并
2）然后，触发调和过程（Reconciliation）
3）经过调和过程后，React 会以相对高效的方式，根据新的状态构建 React 元素树
4）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。
在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。
vue中解决这个问题会配合nexttick来解决
操作DOM，例如我渲染了一个图片， 在渲染之后我要获得它的宽和高，做出一个放大镜的效果，这个时候就要用到refs来获取了。
将ref写成一个函数的话，在react销毁组件或重新渲染的时候去有效的清空ref里面引用的东西，防止内存泄漏这样的问题
高阶组件就是一个函数，他接受的是一个函数（对一个组件进行包装），返回的也是一个函数（返回一个新的组件），可能这个组件很多地方都要用，但少数地方有一点区别，所以我们就可以吧这个区别和公用的东西写到高阶组件里面去，通过往里面传递一些额外的数据来动态的改变这个组件不同场景下的一个差异，所以他就是一个这样的东西，他本质上就是一个函数
高阶组件用得太多会形成一个高阶组件地域，这时可以用到Hook来解决
例如input框中，如果是受控组件，他的value值是受到数据的改变他会改变，而不受控组件没有受到数据的控制只能通过ref去获取他的值，
1.使用 memo 优化子组件
const MyComponent = React.memo((props) => {
// 组件的渲染逻辑
});2.使用 useMemo 和 useCallback
1.useMemo 用于缓存计算结果，仅在相关依赖项变化时重新计算。
const memoizedValue = useMemo(() => computeExpensiveValue(props.value), [props.value]);const handleClick = useCallback(() => {
// 函数逻辑
}, [dependency]);6.使用 shouldComponentUpdate 或 PureComponent（类组件）
10.ajax在react哪个生命周期发送，如何避免他重复获取呢
一般在componentDidMount中发送 ，
componentWillMount在新版本中已经废弃了，在react16.0之后，componentWillMount还可能会被多次执行，一次在服务器端一次在客户端，而且请求的数据一定在render之后到达，如果没有初始状态的值得话，用户的体验效果就不太好了
在Server-Side Rendering(服务器渲染)项目中，componentWillMount要做服务器端数据的获取，不能被占用
如果在第一次请求到数据后，可以将获取到的数据存放 在 redux里面， 当再一次进入该页面的时候，判断是否已经有数据了如果有就直接拿过来用就行了，
11.Server-Side Rendering(服务器渲染)的原理
1.请求处理
12.react-saga的设计思想是什么，什么是sideEffects
React-Saga的设计思想
React-Saga是用于管理React应用中副作用（side effects）的库，它的设计思想主要基于以下几点：
（一）分离关注点
（二）基于生成器函数
（三）监听和处理动作
关于 side effects
（一）数据修改
（二）网络请求
（三）文件操作
（四）数据库操作
13.jquery和react和vue能存在一个项目里面吗
可以，相互之间不要交互操作就行
14.组件是什么，类是什么，类被编译成什么
import引入的是一个模块 方便于webpack打包
组件是一个页面的一个部分，例如一个按钮，一个表单他就是一个组件，他本质上就是一个类，最本质上是一个构造函数
15.react-router4的核心思想是什么，和3有什么区别
router4的话相当于把所有的路由都变成了组件，而在之前的版本都是将所有的路由全部写在一个地方来管理，都是一个基于配置的一个思想
16.reselect是做什么的
实际上就相当于vue里面的computed计算属性，在react里面也是充当与一个计算属性的作用，提升性能
17.react-router的基本原理
1.hashHistory不需要和后端配合，只要前端就行了
2.broeserHistory则需要后端服务器做一些路由的配置
router是VueRouter的实例，相当于一个全局的路由器对象，里面包含了很多属性和子对象，一般用的跳转链接是this.$router.push,和router-link一样
而且他会往history栈里面添加一个新的记录
route相当于当前正在跳转的路由对象，可以在里面获取name，path，params，quert等
18.什么时候使用异步组件
懒加载，按需加载
19.react懒加载实现方法
React.lazy() 方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入。
在React的项目中import导入其他组件和库都是默认在初始直接导入的,webpack等打包工具会将import导入的文件直接合并到一个大文件中,如果项目很大,打包完后初始化加载时需要加载的文件会很大,这时候就需要代码分割。
//静态导入:
import { add } from './math';
console.log(add(16, 26));
//动态导入:
import("./math").then(math => {
console.log(math.add(16, 26));
});
//使用了动态导入之后,webpack检测到这种语法会自动代码分割。React.Suspense（16.6以后的版本）
Suspense的作用就是在遇到异步请求或者异步导入组件的时候等待请求和导入完成再进行渲染
lazy和suspense实现组件懒加载:
import React, { lazy, Suspense } from "react";
// import Allcheck from "./Allcheck";
let Allcheck = lazy(() => import("./Allcheck"));
/*
lazy
*/
class Lazy extends React.Component {
constructor() {
super();
this.state = {
isShow: false,
};
}
showme() {
this.setState({
isShow: !this.state.isShow,
});
}
render() {
let { isShow } = this.state;
return (
<div>
<button onClick={this.showme.bind(this)}>显示隐藏</button>
{isShow && (
<Suspense fallback="加载中……">
<Allcheck />
</Suspense>
)}
</div>
);
}
}
export default Lazy;20.在react中如何防范xss
在react中有一个dangerouslySetInnerHTML方法，他不会对一些标签多过滤，这个方法要谨慎使用
21.JSX
JSX是语法的扩展，帮我们生成虚拟DOM--但他要配合bable才能使用
22.react组件通信
父子： 将父组件的值直接通过props传入子组件，子组件直接使用该值即可。
子父: 将父组件的改变状态的方法传入子组件的props,绑定给子组件中的某些触发事件譬如按钮的点击，输入框输入等等，得到子组件的值或状态或动作再调用父组件的方法得到子组件中的值。
兄弟： 事实上是将一些共同的状态存入一个更高的组件中存放着，从这个地方操作值和调用值。
23.state和props区别
一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置
