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'));