乐趣区

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

作者：

jiezi

在

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();
        }
    }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章