本文深入探讨React的核心概念，包括其作为JavaScript库的角色、组件化设计思想、组件生命周期，以及单向数据流原理。详细阐述了React组件之间的通信方式，如props与state的使用，并介绍了函数式组件与类组件的区别。同时，文章讨论了React Hooks的优势，如代码复用和状态管理。此外，还涉及到了Redux在状态管理中的作用及其解决的问题，以及SPA和MPA的应用场景和路由原理。最后，提到了函数组件如何通过Hooks获取执行状态。
学习记录，如有不正之处，欢迎指正🤝，万分感谢！
1、 react是什么？ react设计思想？react组件生命周期是怎样的？
react是一个用于构建用户界面的JavaScript库，它可以通过组件化的方式构建快速响应的大型Web应用程序，它使用声明式（告诉程序需要什么效果）编写页面；跨平台（web，Android...）。
MVC（Model View Controller）?
react设计思想：UI=render(data)，数据操作DOM，响应式编程
react组件生命周期：
三个状态：
·挂载 mounting：已插入真实DOM
constructor() 构造函数
getDerivedStateFromProps()
render()
componentDidMount()
·更新 updating：正在被重新渲染
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
·卸载 unmounting：已移除真实DOM
conmponentWillUnmount()
阶段：
初始化，更新，销毁，错误处理
图解：https://blog.csdn.net/weixin_45374484/article/details/104456589
2、 使用框架开发对比原生开发 有何优势？
框架：framework
优势：框架会有统一的规范、官方文档、社区等，能较快地帮助解决问题，也能让团队协作较好，提高开发效率；
框架经过市场的考验，稳定性较好，技术人员容易上手快；
很多框架是免费的，成本低
3、 什么是jsx? 写个jsx的样例
jsx = JavaScript+XML，使用小驼峰命名（因为语法是更接近JavaScript，而不是HTML），在js中可以写html
jsx是js的语法扩展
jsx语法：html语言直接写在js语言之中，不加任何引号
例子：
（1）
ReactDOM.render(
<div>
<h1>hello world</h1>
<p data-myattribute = "xxxx">hi</p> ➡添加自定义属性需要使用 data- 前缀
</div>
,
document.getElementById('example')
);
（2）放在外面，一个单独的文件
ReactDOM.render(
<h1>Hello world</h1>,
document.getElementById('example')
);
在html中引入：
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld.js"></script>
</body>
4、什么是单向数据流？
单向：朝一个方向。
单向数据流：数据朝一个方向流动，从上到下。当数据有变化时，它影响其下游
5、react 组件之间的通信方式？
（1）父子组件通信
父→子 props
子→父 函数
（2）兄弟组件通信
兄弟<=>父<=>兄弟；缓存；路由
（3）父孙组件通信
context
（4）无关系组件通信
缓存；路由；redux，Mobx等全局状态管理工具
6、react中 state与props的区别？ 什么是state, 什么是props? 如何修改state或props？state或props变化会引发哪些生命周期执行？
（外）props组件之间传递，props-属性，不可变；（内）state组件更新控制，state-状态，记录自身数据的变化，可随用户交互改变
state = {
xxxx:xx
}
this.state.xxxx
constructor(props){
super(props)
this.state = {
xxxx:xx
}
}
this.setSate({})
props 是个只读属性，可以通过state来间接“修改”props，用setState把props传入到组件中，再赋值到state，进行修改
state或props变化会引发更新 卸载
7、react key有什么作用？补充详情
标识，在数据传递的时候能区别
8、什么是类组件？什么是函数式组件？ react hooks是什么？
（1）类组件：
import React from 'react';
class name extends React.Component{
render(){ ⬅渲染
return ( ➡在js中嵌套html用()
<> → 一定要有根元素，在html中想写js用{}
</>
)
}
}
export default name;
（2）函数式组件：
es5：
function name(){
}
export default name;
es6:
const name = ()=>{
}
export default name;
函数式组件没有生命周期
没有this
没有state状态 → import {useState} from 'react';
hooks以”use“开头，在不写class的情况下可以使用state，函数式组件
9、hooks 有哪些优点？解决了哪些问题？
hooks，钩子/函数
hooks状态管理的解决方案之一，它将组件中关联的部分分成更小的
函数式编程，每个功能都写在函数中，清晰，
代码复用
像useEffect代替了生命周期函数，useState可以初始化状态，useContext接受上下文...
10、什么是redux? redux思想？解决了哪些问题？除了redux还有哪些解决方案？
redux是一个专门用于做数据状态管理的js库，不是react的插件。中间件
store
reducer
action
dispatch
subscribe
getState
redux思想：每个state变化可预测，动作与状态在store中统一管理
redux解决了组件间状态共享和状态管理的问题，react中组件是从上至下传递数据的
其他解决方案：MobX，hooks，RxJS，PullState
11、函数组件如何获取自身的执行状态？ 如是否更新， 是否挂载完成，如何知道自己被销毁了？
函数组件没有生命周期，函数组件是一个纯函数，执行完即销毁
hooks
12、生命周期的正确执行顺序（类组件）？
13、SPA 是什么？MPA 是什么？SPA 的路由原理？
SPA：Single Page Application，单页面应用
把整个项目的所有页面的所有内容分成了很多的小块（组件），可以重复利用、任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码），html就相当于一个容器，里面可以用来装很多的组件，需要某个组件时，直接引入；跳转时，直接跳转组件；需要加载某个组件时，js动态创建组件里的html，css
MPA：Multi Page Application，多页面应用
由多个html组成，每一次页面跳转的时候都需要发出一个http请求，后台服务器都会给返回一个新的html文档，页面跳转所有的资源都要重新加载。
路由:用户发送一个请求,通过对应的映射函数来处理请求。本质是函数,url发起请求,通过映射函数处理请求。
SPA单页面应用中的路由分为两种: hash模式和history模式
SPA不会重新进行http请求去获取页面，而是通过改变页面渲染视图来实现。在页面跳转的时候调用pushState或replaceState，来记录用户的跳转信息
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
