摘星星计划】day16"/>
【摘星星计划】day16
学习记录，如有不正之处，欢迎指正🤝，万分感谢！
1、 react是什么？ react设计思想？react组件生命周期是怎样的？
react是一个用于构建用户界面的JavaScript库，它可以通过组件化的方式构建快速响应的大型Web应用程序，它使用声明式（告诉程序需要什么效果）编写页面；跨平台（web，Android...）。
MVC（Model View Controller）?react设计思想：UI=render(data)，数据操作DOM，响应式编程react组件生命周期：三个状态：·挂载 mounting：已插入真实DOMconstructor() 构造函数getDerivedStateFromProps()render()componentDidMount()·更新 updating：正在被重新渲染getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()·卸载 unmounting：已移除真实DOMconmponentWillUnmount()阶段：初始化，更新，销毁，错误处理图解：
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
getStateredux思想：每个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，cssMPA：Multi Page Application，多页面应用由多个html组成，每一次页面跳转的时候都需要发出一个http请求，后台服务器都会给返回一个新的html文档，页面跳转所有的资源都要重新加载。路由:用户发送一个请求,通过对应的映射函数来处理请求。本质是函数,url发起请求,通过映射函数处理请求。SPA单页面应用中的路由分为两种: hash模式和history模式SPA不会重新进行http请求去获取页面，而是通过改变页面渲染视图来实现。在页面跳转的时候调用pushState或replaceState，来记录用户的跳转信息
更多推荐
【摘星星计划】day16
发布评论