关于react.js:react高频面试题自测

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收回用户的 Action
• Dispatcher 收到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();
        }
    }
}