React

431 阅读2分钟

什么时候使用状态管理器?

  • 1.页面级组件间不需要通讯,共享状态。
  • 2.没有全局的变量共享。
  • 3.小型应用,可通过context满足简单需求

render函数中return如果没有使用()会有什么问题?

这是return自动分号补齐一个常见的坑 正确的做法:

function App() {
    return (
        <div className="App">
            你好
            <Home />
            <My />
        </div>
    );
}

function App() {
    return <div className="App">
            你好
            <Home />
            <My />
        </div>
}

错误的做法:

function sum(x, y) {
return
x+y;
}
会被解析成
function sum(x, y) {
return// 这里被自动加上了分号
x+y;
}

componentWillUpdate可以直接修改state的值吗?

不可以。与componentWillMount,componentWillReceiveProps同理都不可以,会造成死循环。 如下代码:

import React from 'react';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 1 };
    }

    handleChage = () => {
        this.setState({
            name: 2
        });
    };

    render() {
        return (
            <div>
                <input value="input" onChange={this.handleChage} />
                <h1>{this.state.name}</h1>
            </div>
        );
    }

    componentWillUpdate() {
        this.setState({
            name: 3
        });
        console.log('component will update');
    }
}

export default App;

执行结果如下:

image.png

说说你对React的渲染原理的理解

  • 1,react15中渲染过程分为两个阶段,一个是Reconciler阶段,再一个是Renderer阶段,这两个阶段是同步交叉执行的,不可进行中断。
Reconciler:采用递归的方式进行虚拟dom的创建,递归过程是不可中断的,然后与之前的虚拟dom进行比较,即diff dom ,找出
对应的变化之后,调用renderer阶段执行渲染。
Renderer:将需要更改的部分渲染到真实的dom上。
  • 2,react16,因为react15为同步不可中断,在cpu处理以及io处理方面存在一定的问题,cpu中处理js逻辑过长,页面卡顿掉帧,io瓶颈,网络延迟,页面请求时间过长,用户对页面请求是有感知的,这种问题也需要将同步的更新变为异步的可中断更新。由于react15的递归方式不可实现异步可中断更新,所以react16采用fiber进行了重写。
Scheduler:根据优先级调度任务,交给reconciler执行
Reconciler:采用fiber架构实现异步更新可中断的行为。
Renderer:当组件的所有Reconciler内务在内存中执行完成之后,才会进入renderer阶段。

什么渲染劫持?

改变一个组件的原有渲染输出就叫做渲染劫持,这个与react的高阶组件放一起讲更容易理解,通过继承一个原有组件,修改render逻辑,或者修改state和pros都可以达到渲染劫持的目的。