2024年最全React进阶（八）：state 属性讲解，数据库开发工程师面试

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

this.setState({
  date: new Date()
});

}

render() {
return (

Hello, world!

现在是 {this.state.date.toLocaleTimeString()}.

);
}
}

ReactDOM.render(
,
document.getElementById(‘example’)
);

`componentDidMount()` 与 `componentWillUnmount()` 方法被称作生命周期钩子。有关生命周期钩子函数详参博文《[React进阶（五）：组件生命周期](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》。


在组件输出到 `DOM` 后会执行 `componentDidMount()` 钩子，可以在这个钩子上设置一个定时器。


`this.timerID` 为定时器的 ID，可以在 `componentWillUnmount()` 钩子中卸载定时器。


**代码执行顺序：**



> 
> 1. 当 `<Clock />` 被传递给 `ReactDOM.render()` 时，`React` 调用 Clock 组件的**构造函数**。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 `this.state`  
>  ，稍后会更新此状态。
> 2. `React` 然后调用 Clock 组件的 `render()` 方法。 `React` 更新 `DOM` 以匹配 Clock 的渲染输出。
> 3. 当 Clock 的输出插入到 `DOM` 中时，`React` 调用 `componentDidMount()` 生命周期钩子。 其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 `tick()`。
> 4. 浏览器每秒钟调用 `tick()` 方法。 其中，Clock 组件通过使用包含当前时间的对象调用 `setState()` 来调度`UI`更新。 通过调用 `setState()` ，`React` 知道状态已经改变，并再次调用 `render()`方法来确定屏幕上应当显示什么。这一次，`render()` 方法中的 `this.state.date`将不同，所以渲染输出将包含更新后的时间，并相应地更新 `DOM`。
> 5. 一旦 Clock 组件被从 `DOM` 中移除，`React` 会调用 `componentWillUnmount()`这个钩子函数，定时器也就会被清除。
> 
> 
> 


### 四、数据自顶向下流动


父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。


这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。


以下实例中 `FormattedDate` 组件将在其属性中接收到 date 值，并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入：

function FormattedDate(props) {
return

现在是 {props.date.toLocaleTimeString()}.

;
}

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (

Hello, world!

);
}
}

ReactDOM.render(
,
document.getElementById(‘example’)
);

这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 `UI` 只能影响树中下方的组件。


**想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。**


为了表明所有组件都是真正隔离的，我们可以创建一个 App 组件，它渲染三个Clock：

function FormattedDate(props) {
return

现在是 {props.date.toLocaleTimeString()}.

;
}

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (

Hello, world!

);
}
}

function App() {
return (

);
}

ReactDOM.render(, document.getElementById(‘example’));

以上实例中每个 Clock 组件都建立了自己的定时器并且独立更新。


在 `React` 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。


我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。


### 五、拓展阅读


### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)



r_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)