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
| 條件 | State | Props |
|---|---|---|
| 1. 從父組件中接收初始值 | Yes | Yes |
| 2. 父組件可以改變值 | No | Yes |
| 3. 在組件中設置默認值 | Yes | Yes |
| 4. 在組件的內部變化 | Yes | No |
| 5. 設置子組件的初始值 | Yes | Yes |
| 6. 在子組件的內部更改 | No | Yes |
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'));