2021react 面试题附答案

React 视频教程系列

React 实战：CNode 视频教程

残缺教程目录：点击查看

React 经典教程 - 从入门到精通

残缺教程目录：点击查看

最新最全前端毕设我的项目（小程序 +VUE+Noed+React+uni app+Express+Mongodb）

残缺教程目录：点击查看

2021 前端 React 精品教程

残缺教程目录：点击查看

1. 你了解“在 React 中，一切都是组件”这句话。

组件是 React 利用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的局部。每个组件彼此独立，而不会影响 UI 的其余部分。

2. 解释 React 中 render() 的目标。

每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的示意。如果须要渲染多个 HTML 元素，则必须将它们组合在一个关闭标记内，例如 <form>、<group>、<div> 等。此函数必须放弃污浊，即必须每次调用时都返回雷同的后果。

3. 如何将两个或多个组件嵌入到一个组件中？

能够通过以下形式将组件嵌入到一个组件中：

class MyComponent extends React.Component{render(){
        return(          
            <div>
                <h1>Hello</h1>
                <Header/>
            </div>
        );
    }
}
class Header extends React.Component{render(){
        return
            <h1>Header Component</h1>   
   };
}
ReactDOM.render(<MyComponent/>, document.getElementById('content')
);

4. 什么是 Props?

Props 是 React 中属性的简写。它们是只读组件，必须放弃纯，即不可变。它们总是在整个利用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于保护单向数据流，通常用于出现动静生成的数据。

5. React 中的状态是什么？它是如何应用的？

状态是 React 组件的外围，是数据的起源，必须尽可能简略。基本上状态是确定组件出现和行为的对象。与 props 不同，它们是可变的，并创立动静和交互式组件。能够通过 this.state() 拜访它们。

6. 辨别状态和 props

7. 什么是受控组件和非受控组件

• 受状态管制的组件，必须要有 onChange 办法，否则不能应用 受控组件能够赋予默认值（官网举荐应用 受控组件）实现双向数据绑定

class Input extends Component{constructor(){super();
        this.state = {val:'100'}
    }
    handleChange = (e) =>{ // e 是事件源
        let val = e.target.value;
        this.setState({val});
    };
    render(){
        return (<div>
            <input type="text" value={this.state.val} onChange={this.handleChange}/>
            {this.state.val}
        </div>)
    }
}
复制代码 

• 非受控也就意味着我能够不须要设置它的 state 属性，而通过 ref 来操作实在的 DOM

class Sum extends Component{constructor(){super();
        this.state =  {result:''}
    }
    // 通过 ref 设置的属性 能够通过 this.refs 获取到对应的 dom 元素
    handleChange = () =>{
        let result = this.refs.a.value + this.b.value;
        this.setState({result});
    };
    render(){
        return (<div onChange={this.handleChange}>
                <input type="number" ref="a"/>
                {/* x 代表的实在的 dom, 把元素挂载在了以后实例上 */}
                <input type="number" ref={(x)=>{this.b = x;}}/>
                {this.state.result}
            </div>
        )
    }
}

8. 什么是状态晋升

应用 react 常常会遇到几个组件须要共用状态数据的状况。这种状况下，咱们最好将这部分共享的状态晋升至他们最近的父组件当中进行治理。咱们来看一下具体如何操作吧。

import React from 'react'
class Child_1 extends React.Component{constructor(props){super(props)
    }
    render(){
        return (
            <div>
                <h1>{this.props.value+2}</h1>
            </div> 
        )
    }
}
class Child_2 extends React.Component{constructor(props){super(props)
    }
    render(){
        return (
            <div>
                <h1>{this.props.value+1}</h1>
            </div> 
        )
    }
}
class Three extends React.Component {constructor(props){super(props)
        this.state = {txt:"牛逼"}
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(e){
        this.setState({txt:e.target.value})
    }
    render(){
       return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange}/>
                <p>{this.state.txt}</p>
                <Child_1 value={this.state.txt}/>
                <Child_2 value={this.state.txt}/>
            </div>
       )
    }
}
export default Three

9、什么是高阶组件

高阶组件不是组件，是 加强函数，能够输出一个元组件，返回出一个新的加强组件

• 属性代理 (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();
        }
    }
}

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