乐趣区

关于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 的作用是什么?

KeysReact 用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识

  • 在开发过程中,咱们须要保障某个元素的 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();
        }
    }
}
退出移动版