项目打包部署和错误边界

1、如何把写完的项目打包

①npm run build

        执行完毕以后会在根文件夹生成一个build文件夹

②怎么运行打包完的文件？这个时候需要部署到服务器上才能运行

        可以用express（Node里面快速搭建服务器的框架）或者第三方的库以指定的文件夹作为服务器的根目录快速帮你开启一台服务器帮你部署这些资源，比如serve库。

        1、全局安装库 npm i serve -g

        2、然后输入你想以哪个文件夹（生成的build文件夹）作为跟路径 server build

2、错误边界

（只适用于生产环境，开发环境是不能展示效果的，也就是build以后的页面可以正常使用错误边界，而开发情况下可能会闪一下继续报错）

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

（比如是子组件出了问题，那就正常展示父组件不展示子组件然后显示一个备用页面告诉用户子组件无法渲染就好了）

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

新的生命周期钩子: static getDerivedStateFromProps

React 在实例化组件之后以及重新渲染组件之前，将调用新的静态 getDerivedStateFromProps 生命周期方法。该方法类似于 componentWillReceiveProps，可以用来控制 props 更新 state 的过程。它返回一个对象表示新的 state。如果不需要更新组件，返回 null 即可。

getDerivedStateFromProps 与 componentDidUpdate一起将会替换掉所有的 componentWillReceiveProps。

 使用步骤：这里使用的生命周期钩子是getDerivedStateFromError

①定义一个state的参数来接收错误信息

②当Parent任何子组件出现报错时候，会触发getDerivedStateFromError调用（参考上面的getDerivedStateFromProps），并携带错误信息，它会返回一个对象是具体的错误信息，返回一个对象表示新的 state。

③显示子组件的时候判断一下有没有错误信息，有的话展示备用页面

 笔记参考于尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili