2023年最全前端React18面试题考点

目录

目录

React18

特点

声明式编码

单向数据流 

组件化

虚拟DOM（Virtual Dom）（同Vue）

Diff算法（同Vue）

组件属性

props

state

refs

总结

受控组件和非受控组件

事件event

事件处理的几种方法

事件中this的处理

事件传参处理

鼠标事件 mouseenter与mouseover区别

跨组件通信

生命周期

状态提升

复用组件

Render Props模式

HOC高阶组件模式

Hooks

useState

useReducer

useEffect

useRef

倒计时（⭐手写）

useCallback和useMemo

自定义Hook

StrictMode严格模式

Router

路由模式（同Vue）

基础路由搭建

重定向路由

自定义全局守卫

动态路由

Redux状态管理库

应用

React脚手架

Angular,Vue,React对比

Angular

React和Vue

MVC、MVP、MVVM模式

MVC （Model View Controller）

MVP（Model View Presenter）

MVVM （Model View View Model）

---

React18

React是用来构造用户界面的JS库 

在React18中，需要使用两个文件来初始化框架：

• react.development.js 或 react模块 -> 生成虚拟DOM

• react-dom.development.js 或 react-dom/client模块 -> Diff算法 + 处理真实DOM

下面就是初始化React程序的代码。

特点

虚拟DOM，组件化设计模式，声明式代码，单向数据流，使用jsx描述信息

声明式编码

• 命令式编程：流程（每一步指令怎么去做）
• 声明式编码：目标，而非流程

因没有指令的概念，所以条件渲染和列表渲染都要通过命令式编程来实现（即JS本身的能力）

map()方法
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app); 
let data = [
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
    { id: 3, text: 'ccc' }
];
let element = (
    

        {
            data.map(v=>
{v.text}
)
        }
    
);
root.render(element);

单向数据流 

数据主要从父节点传到子节点（通过props）,如果父级的某个props改变了，React会重新渲染所有子节点

组件化

可复用的代码可以抽成组件共同使用（UI，方法等） 

每个UI块都是一个组件，每个组件都有一个状态。

虚拟DOM（Virtual Dom）（同Vue）

虚拟 DOM，根据模板生成一个js对象（使用createElement，方法），取代真实的 DOM 。

当页面打开时浏览器会解析 HTML 元素，构建一颗 DOM 树，将状态全部保存起来

Vue和React框架都会自动控制DOM的更新，而直接操作真实DOM是非常耗性能的，所以才有了虚拟DOM的概念

React遵循可观察的模式，并监听状态变化。当组件的状态改变时，React更新虚拟DOM树。

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢
 

Diff算法（同Vue）

通过同层的树节点进行比较的高效算法,比较方式：diff整体策略为：深度优先，同层比较

总的来说就是减少DOM，重绘和回流

react生成的新虚拟DOM和旧虚拟DOM的比较规则：

• 如果旧的虚拟DOM中找到了与新虚拟DOM相同的key:

如果内容没有变化，就直接只用之前旧的真实DOM
如果内容发生了变化，就生成新的真实DOM

• 如果旧的虚拟DOM中没有找到与新虚拟DOM相同的key:

根据数据创建新的真实的DOM,随后渲染到页面上

组件属性

每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。

props

对外公开属性，只读

传递数据

传递函数

// 子组件
class Head extends React.Component {
    render(){
        this.props.getData('子组件的问候~~~')
        return (
            
Head Component
        );
    }
}
// 父组件
class Welcome extends React.Component {
    getData = (data) => {
        console.log(data)
    }
    render(){
        return (
            

                hello world, {this.props.msg}
                

                
            
        );
    }
}

构造函数获取props

class Foo {
    constructor(props){
        this.props = props;
    }
}
class Bar extends Foo {
    constructor(props){
        super(props);
        console.log(this.props);
    }
    render(){
        console.log(this.props);
        return '';
    }
}
let props = {
    msg: 'hello world'
};
let b = new Bar(props);
b.props = props;
b.render();

多属性传递props

class Welcome extends React.Component {
    render(){
        //解构
        let { msg, username, age } = this.props;
        console.log( isChecked );
        return (
            
hello world, {msg}, {username}, {age}
        );
    }
}
let info = {
    msg: 'hi react',
    username: 'xiaoming',
    age: 20
};
let element = (
    
);

设置props初始值和类型

import PropTypes from 'prop-types'
class Welcome extends React.Component {
    static defaultProps = {
        age: 0
    }
    static propTypes = {
        age: PropTypes.number
    }
    ...
}

state

组件的私有属性，值是对象（可以包含多个key-value的组合）

通过state的变化设置响应式视图，受控于当前组件

class Welcome extends React.Component {
    state = {
        msg: 'hello',
        count: 0
    }
    handleClick = () => {   
        this.setState({
            msg: 'hi'
        });
    }
    render(){
        console.log('render');
        return (
            

                点击
                {this.state.msg}, {this.state.count}
            
        );
    }
}
let element = (
    
);

refs

React操作原生DOM跟Vue框架是类似的，都是通过ref属性来完成的

class Welcome extends React.Component {
    myRef = React.createRef()
    handleClick = () => {   
        //console.log(this.myRef.current);  // 原生DOM input
        this.myRef.current.focus();//获取焦点
    }
    render(){
        return (
            

                点击
                
            
        );
    }
}

总结

props

公开，单向数据流值，父子组件间的唯一通信，不可改

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

state

私有（通过Ajax获取回来的数据，一般都是私有数据），

React 把组件看成是一个状态机（State Machines），

只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

refs

当需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

当需要操作的元素和获取的元素是同一个时，无需ref

受控组件和非受控组件

非受控组件
现用现取，官方建议尽量少用ref，用多了有一定的效率影响

handleSubmit = (event) => {
            event.preventDefault() //阻止表单提交
            const {username, password} = this//拿到的是form下的username, password结点
            alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
        }
 
render() {
return (

用户名： this.username = c} type="text" name="username"/>
密码： this.password = c} type="password" name="password"/>
登录

受控组件
将输入维护到state，等需要时再从state取出来

    class Login extends React.Component {
 
//state最好要初始化状态
        state = {
            username: '', //用户名
            password: '' //密码
        }
 
//保存用户名到状态中
        saveUsername = (event) => {
this.setState({username: event.target.value})
        }
 
//保存密码到状态中
        savePassword = (event) => {
this.setState({password: event.target.value})
        }
 
//表单提交的回调
        handleSubmit = (event) => {
          event.preventDefault() //阻止表单提交
          const {username, password} = this.state//获得的是state下的username,password值
          alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
        }

事件event

React中的事件都是采用事件委托的形式，所有的事件都挂载到组件容器上，其次event对象是合成处理过的

事件处理的几种方法

import React from 'react'
class Test extends React.Component{
    
    handleClick2(){
        console.log('click2')
    }
 
    hangleClick4 = () =>{
        console.log('click4')
    }
    render(){
        return(
            click1
            click2
             {console.log('click3')}>click3
            click3
        )
    }
}
export default Test

事件中this的处理

class Welcome extends React.Component {
    handleClick = (ev) => {  //推荐 public class fields语法，箭头函数不会创建自己的                                      this，它只会从自己的作用域链的上一层继承 this。
        console.log(this);   //对象
        console.log(ev);
    }
    handleClick(){           //不推荐 要注意修正指向
        console.log(this);   //按钮 
    }
    render(){
        return (
            

                点击
                hello world
            
        );
    }
}
let element = (
    
);

事件传参处理

推荐采用函数的高阶方式，具体代码如下：

class Welcome extends React.Component {
    handleClick = (num) => {   // 高阶函数
        return (ev) => {
            console.log(num);
        }
    }
    render(){
        return (
            

                点击
                hello world
            
        );
    }
}
let element = (
    
);

鼠标事件 mouseenter与mouseover区别

mouseenter： 鼠标进入被绑定事件监听元素节点时触发一次，再次触发是鼠标移出被绑定元素，再次进入时。而当鼠标进入被绑定元素节点触发一次后没有移出，即使鼠标动了也不再触发。

mouseover： 鼠标进入被绑定事件监听元素节点时触发一次，如果目标元素包含子元素，鼠标移出子元素到目标元素上也会触发。

mouseenter 不支持事件冒泡 mouseover 会冒泡

跨组件通信

Welcome传递给Title：

let MyContext = React.createContext();
class Welcome extends React.Component {
    state = {
        msg: 'welcome组件的数据'
    }
    render(){
        return (
            

                Hello Welcome
                
                    
                
            
        );
    }
}
class Head extends React.Component {
    render(){
        return (
            

                Hello Head