社招前端react面试题整理

什么是上下文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'));

React-Router 4的Switch有什么用？

Switch 通常被用来包裹 Route，用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>，它里面不能放其他元素。

假如不加 <Switch> ：

import {
    Route } from 'react-router-dom'

<Route path="/" component={
   Home}></Route>
<Route path="/login" component={
   Login}></Route>

Route 组件的 path 属性用于匹配路径，因为需要匹配 / 到 Home，匹配 /login 到 Login，所以需要两个 Route，但是不能这么写。这样写的话，当 URL 的 path 为 “/login” 时，<Route path="/" />和<Route path="/login" /> 都会被匹配，因此页面会展示 Home 和 Login 两个组件。这时就需要借助 <Switch> 来做到只显示一个匹配组件：

import {
    Switch, Route} from 'react-router-dom'

<Switch>
    <Route path="/" component={
   Home}></Route>
    <Route path="/login" component={
   Login}></Route>
</Switch>

此时，再访问 “/login” 路径时，却只显示了 Home 组件。这是就用到了exact属性，它的作用就是精确匹配路径，经常与<Switch> 联合使用。只有当 URL 和该 <Route> 的 path 属性完全一致的情况下才能匹配上：

import {
    Switch, Route} from 'react-router-dom'

<Switch>
   <Route exact path="/" component={
   Home}></Route>
   <Route exact path="/login" component={
   Login}></Route>
</Switch>

React 中 keys 的作