1、react组件封装
封装组件分三类：
封装普通展示类组件
通过函数组件实现，不带生命周期，不带state
封装纯逻辑类组件
通过组件的生命周期来做判断，给传入的组件加上一些附加属性或逻辑操作或props
封装通用业务组件
上述两种组合，组件本身可完成独立的通用业务。
可组合、可维护、可重用
一个设计良好的组件应该有什么特性？
高内聚低耦合
在封装一组组件时候应该思考什么？
组件应该是做什么的
组件至少应该知道哪些信息
组件会反馈什么信息
不应该只限于当前的需求设计出仅限于当前需求的组件，而是应该设计出适应大部分需求的通用组件。
所以应该首先对需求进行抽象
2、redux遵循的原则
1、单个事实来源：整个应用程序的状态存储在单个存储对象中。
2、状态是只读的：更改状态唯一方法是触发动作。
3、使用纯函数更改：为了指定如何通过操作转换。
3、redux方法
1、store保存数据的地方
import {createStore} from 'redux';
const store = createStore(fn);
2、store.getState()
当前时刻的state，通过store.getState()拿到
3、action
state的变化会导致view变化，但用户接触不到state，state的变化是view导致的，action就是view发出的通知表示state要变化了。
const action = {
type:"Add_learn",
payload:"XXX"
}
4、action Creator
view要发送多少种消息就有多少种action，可以定义一个函数来生成action。
5、store.dispatch()
是view发出action的唯一方法。
6、reducer
Store收到Action后，必须给出一个新的state，这个过程叫做reducer
Reducer重要特征他是纯函数
7、store.subscribe()
设置监听函数，一旦state发生变化就会执行store.subscribe()
8、combineReducers()
将一个个小reducer合成大的Reducer
4、redux中间件
action和store之间，沟通桥梁是dispatch，在redux中action是一个对象，但通过中间件action可以是一个函数通过中间件转换成对象在传递给store。（redux-thunk）
5、你会把数据统一放到redux管理还是共享数据放到redux?
从项目整体来考虑，如果我只把共用的数据放到redux存储，一个组件里又有state存储数据，又有props存储数据，又有redux存储数据，当页面出现问题的时候这三个数据都有可能出现问题，那如何定位问题，先要看state，再看props,再看redux。开发代码是很快的，最费时间的是程序的后期可维护性和代码出错之后的可调节性，回头找问题很麻烦，尤其是业务复杂的时候，组件之间拆分的又不干净的时候，又state，props，redux怎么找，所以把所有数据都放在redux里定位问题就很快。
6、react性能优化
pureComponent:内部自带shouldComponentUpdate
7、虚拟dom
js对象，真是dom很复杂，会有绑定事件，属性，各种方法，所以两个真实dom比对非常耗性能。于是把真实dom对象变成js对象，就没有dom上那些特性了，提升了性能。
diff算法：同层比对，如果这层不一样，就不往下比对了
8、调用setState之后发生了什么？
函数式调用
this.setState((prevState)=>{
age:++ prevState
})
并没有立即执行，异步形式
9、refs应用场景
渲染一个图片，获取图片的宽高。
10、高阶组件
本质上就是一个函数。
这个组件大部分的东西在别的地方都能用，少部分有不同。就可以把公用东西写在高阶组件里。
但高阶组件多了就会形成高阶组件回调地域
解决：hook
11、受控组件和非受控组件的区别
受控组件：组件的改变完全受数据控制，数据变了页面跟着变了。
非受控组件：input框，点击按钮的时候，直接通过refs拿dom上的内容进行操作。不是通过数据来控制。
受控组件更好，react是一个数据驱动的框架。
12、函数式组件和类组件
函数式组件性能更高，没有构建类的过程，没有生命周期。
React.memo(function test(props){
return <div>123</div>
})
React.memo()使纯函数有shouldComponentUpdate生命周期。
13、Hooks
useState:声明state变量
useEffect:相当于componentDidMount(),componentDidUpdate().
第一个参数是函数，第二个参数要注意，是[],不需要重复执行，数组中不能是引用类型。会和数组中值进行比较，一样就会跳过，实现了性能优化。
不要在循环、嵌套和条件中使用Hooks。
14、哪个生命周期发送ajax
componentDidMount
SSR项目时，componentWillMount要做服务端获取所以不能被占用。
componentWillMount在新版本中将要被废弃
15、react jq vue能否共存在一个项目中
能
//在index.js
<body>
<div></div>
<div id="react"></div>
<div id="vue"></div>
</body>
ReactDom.render(<App/>,document.getElementById("react"))
16、组件是什么，类是什么，模块是什么
组件是页面的一部分
类是构造函数语法糖
模块是webpack引入的一个个文件
17、如何避免ajax重新获取
数据存在redux的store中，判断如果store中存在数据就不请求。
18、hashHistory/BrowserHistory
hashHistory 带#
BrowserHistory 不带#，需要后台工作人员帮忙配置(路由重定向)
#19、什么情况下使用异步组件
安装依赖 react-loadable
更改组件导入方法
const Home = Loadable({
loader: () => import(’…/Home’),
loading: Loading,
timeout: 10000
});
20、xss攻击react怎么防范
慎用dangerouslySetInnerHTML函数
dangerouslySetInnerHTML={{_html:‘’}}
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
