createElement和 cloneElement有什么区别？
createElement是JSX被转载失去的，在 React中用来创立 React元素（即虚构DOM）的内容。cloneElement用于复制元素并传递新的 props。
理解redux吗？
- redux 是一个利用数据流框架，次要解决了组件之间状态共享问题，原理是集中式治理，次要有三个外围办法：action store reduce
工作流程
view 调用store的dispatch 承受action传入的store，reduce进行state操作view通过store提供的getState获取最新的数据
redux的长处：
新增的state 对状态的治理更加明确
流程更加标准，缩小手动编写代码，进步编码效率
redux的毛病：
当数据更新是有时候组件不须要，也要从新绘制，影响效率
哪个生命周期发送ajax
- componentWillMount在新版本react中曾经被废除了
- 在做ssr我的项目时候，componentWillMount要做服务端数据的获取，不能被占用
- 所以在componentDidMount中申请
什么是高阶组件(HOC)
- 高阶组件(Higher Order Componennt)自身其实不是组件，而是一个函数，这个函数接管一个元组件作为参数，而后返回一个新的加强组件，高阶组件的呈现自身也是为了逻辑复用，举个例子
function withLoginAuth(WrappedComponent) { return class extends React.Component { constructor(props) { super(props); this.state = { isLogin: false }; } async componentDidMount() { const isLogin = await getLoginStatus(); this.setState({ isLogin }); } render() { if (this.state.isLogin) { return <WrappedComponent {...this.props} />; } return (<div>您还未登录...</div>); } }}react性能优化是哪个周期函数
shouldComponentUpdate这个办法用来判断是否须要调用render办法从新描述dom。因为dom的描述十分耗费性能，如果咱们能在shouldComponentUpdate方法中可能写出更优化的dom diff算法，能够极大的进步性能
和谐阶段 setState外部干了什么
- 当调用 setState 时，React会做的第一件事件是将传递给 setState 的对象合并到组件的以后状态
- 这将启动一个称为和解（
reconciliation）的过程。和解（reconciliation）的最终目标是以最无效的形式，依据这个新的状态来更新UI。 为此，React将构建一个新的React元素树（您能够将其视为UI的对象示意） - 一旦有了这个树，为了弄清 UI 如何响应新的状态而扭转，React 会将这个新树与上一个元素树相比拟（ diff ）
通过这样做， React 将会晓得产生的确切变动，并且通过理解产生什么变动，只需在相对必要的状况下进行更新即可最小化 UI 的占用空间
为什么不间接更新 state 呢 ?
如果试图间接更新 state ，则不会从新渲染组件。
// 谬误This.state.message = 'Hello world';须要应用setState()办法来更新 state。它调度对组件state对象的更新。当state扭转时，组件通过从新渲染来响应：
// 正确做法This.setState({message: ‘Hello World’});Redux 中间件原理
- 指的是action和store之间，沟通的桥梁就是dispatch，action就是个对象。比方你用了redux-thunk，action也能够是个函数，怎么实现这个过程，就是通过中间件这个桥梁帮你实现的。action达到store之前会走中间件，这个中间件会把函数式的action转化为一个对象，在传递给store
类组件(Class component)和函数式组件(Functional component)之间有何不同
- 类组件不仅容许你应用更多额定的性能，如组件本身的状态和生命周期钩子，也能使组件间接拜访
store并维持状态 - 当组件仅是接管
props，并将组件本身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，能够应用一个纯函数来创立这样的组件。这种组件也被称为哑组件(dumb components)或展现组件
参考：前端react面试题具体解答
同时援用这三个库react.js、react-dom.js和babel.js它们都有什么作用？
- react：蕴含react所必须的外围代码
- react-dom：react渲染在不同平台所须要的外围代码
- babel：将jsx转换成React代码的工具
React 中的高阶组件使用了什么设计模式？
应用了装璜模式，高阶组件的使用：
function withWindowWidth(BaseComponent) { class DerivedClass extends React.Component { state = { windowWidth: window.innerWidth, } onResize = () => { this.setState({ windowWidth: window.innerWidth, }) } componentDidMount() { window.addEventListener('resize', this.onResize) } componentWillUnmount() { window.removeEventListener('resize', this.onResize); } render() { return <BaseComponent {...this.props} {...this.state}/> } } return DerivedClass;}const MyComponent = (props) => { return <div>Window width is: {props.windowWidth}</div>};export default withWindowWidth(MyComponent);装璜模式的特点是不须要扭转 被装璜对象 自身，而只是在里面套一个外壳接口。JavaScript 目前曾经有了原生装璜器的提案，其用法如下：
@testable class MyTestableClass {}React key 是干嘛用的 为什么要加？key 次要是解决哪一类问题的
Keys 是 React 用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识。在开发过程中，咱们须要保障某个元素的 key 在其同级元素中具备唯一性。
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是早先创立的还是被挪动而来的元素，从而缩小不必要的元素重渲染此外，React 还须要借助 Key 值来判断元素与本地状态的关联关系。
注意事项：
- key值肯定要和具体的元素—一对应；
- 尽量不要用数组的index去作为key；
- 不要在render的时候用随机数或者其余操作给元素加上不稳固的key，这样造成的性能开销比不加key的状况下更蹩脚。
什么是上下文Context
Context 通过组件树提供了一个传递数据的办法，从而防止了在每一个层级手动的传递 props 属性。
- 用法：在父组件上定义getChildContext办法，返回一个对象，而后它的子组件就能够通过this.context属性来获取
import React,{Component} from 'react';import ReactDOM from 'react-dom';import PropTypes from 'prop-types';class Header extends Component{ render() { return ( <div> <Title/> </div> ) }}class Title extends Component{ static contextTypes={ color:PropTypes.string } render() { return ( <div style={{color:this.context.color}}> Title </div> ) }}class Main extends Component{ render() { return ( <div> <Content> </Content> </div> ) }}class Content extends Component{ static contextTypes={ color: PropTypes.string, changeColor:PropTypes.func } render() { return ( <div style={{color:this.context.color}}> Content <button onClick={()=>this.context.changeColor('green')}>绿色</button> <button onClick={()=>this.context.changeColor('orange')}>橙色</button> </div> ) }}class Page extends Component{ constructor() { super(); this.state={color:'red'}; } static childContextTypes={ color: PropTypes.string, changeColor:PropTypes.func } getChildContext() { return { color: this.state.color, changeColor:(color)=>{ this.setState({color}) } } } render() { return ( <div> <Header/> <Main/> </div> ) }}ReactDOM.render(<Page/>,document.querySelector('#root'));简述flux 思维
Flux 的最大特点，就是数据的"单向流动"。- 用户拜访
View View收回用户的ActionDispatcher收到Action，要求Store进行相应的更新Store更新后，收回一个"change"事件View收到"change"事件后，更新页面
在React中页面从新加载时怎么保留数据？
这个问题就设计到了数据长久化， 次要的实现形式有以下几种：
- Redux： 将页面的数据存储在redux中，在从新加载页面时，获取Redux中的数据；
- data.js： 应用webpack构建的我的项目，能够建一个文件，data.js，将数据保留data.js中，跳转页面后获取；
- sessionStorge： 在进入抉择地址页面之前，componentWillUnMount的时候，将数据存储到sessionStorage中，每次进入页面判断sessionStorage中有没有存储的那个值，有，则读取渲染数据；没有，则阐明数据是初始化的状态。返回或进入除了抉择地址以外的页面，清掉存储的sessionStorage，保障下次进入是初始化的数据
- history API： History API 的
pushState函数能够给历史记录关联一个任意的可序列化state，所以能够在路由push的时候将以后页面的一些信息存到state中，下次返回到这个页面的时候就能从state外面取出来到前的数据从新渲染。react-router 间接能够反对。这个办法适宜一些须要长期存储的场景。
React 中 keys 的作用是什么？
Keys是React用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识
- 在开发过程中，咱们须要保障某个元素的
key在其同级元素中具备唯一性。在React Diff算法中React会借助元素的Key值来判断该元素是早先创立的还是被挪动而来的元素，从而缩小不必要的元素重渲染。此外，React 还须要借助Key值来判断元素与本地状态的关联关系，因而咱们绝不可漠视转换函数中Key的重要性
如何用 React构建（ build）生产模式？
通常，应用 Webpack的 DefinePlugin办法将 NODE ENV设置为 production。这将剥离 propType验证和额定的正告。除此之外，还能够缩小代码，因为 React应用 Uglify的dead-code来打消开发代码和正文，这将大大减少包占用的空间。
class类的key改了，会产生什么，会执行哪些周期函数？
在开发过程中，咱们须要保障某个元素的 key 在其同级元素中具备唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是早先创立的还是被挪动而来的元素，从而缩小不必要的元素重渲染。此外，React 还须要借助 Key 值来判断元素与本地状态的关联关系，因而咱们绝不可漠视转换函数中 Key 的重要性。
答：componentWillMount componentDidMount render
componentWillReceiveProps调用机会
- 曾经被废除掉
- 当props扭转的时候才调用，子组件第二次接管到props的时候
什么是高阶组件
高阶组件不是组件，是 加强函数，能够输出一个元组件，返回出一个新的加强组件
- 属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和办法到父组件，子组件只负责渲染数据，相当于设计模式里的模板模式，这样组件的重用性就更高了
function proxyHoc(WrappedComponent) { return class extends React.Component { render() { const newProps = { count: 1 } return <WrappedComponent {...this.props} {...newProps} /> } }}- 反向继承
const MyContainer = (WrappedComponent)=>{ return class extends WrappedComponent { render(){ return super.render(); } }}