nan's notes

Fragments Fragments可以理解成：多个片段，多个部分（React元素返回的Fragments） 在此之前，我们开发的组件 return 的都是单个React元素，想要返回多个元素就必须使用父元素包裹这些子元素，然后返回这个父元素。 然而，这并不总是能满足要求的，例如在下述场景中，嵌套div将导致表格不能正常渲染 class Table extends React.Component { render() { return ( <table>

错误边界 为什么需要？ 在React16之前，组件内的JavaScript错误会导致React的内部状态被破坏，并且在下一次渲染时产生无法追踪的错误。这些错误基本上是由其他的非React组件代码错误引起的。但React并没有提供一种优雅的错误处理，也无法从错误中恢复。 部分UI的JS错误不应该导致整个应用的崩溃，为了解决这个问题，React引入了一个新的概念——错误边界。 错误边界是一种React组件，这种组件可以捕获并打印发生在其子组件数任何位置的JS错误，然后，渲染出备用UI，而非崩溃了的子组件。错误边

简要介绍 在典型的React应用中，数据是通过props属性自上而下（由父及子）进行传递的 但这种做法对于类似地区偏好，UI主题等全局共享的属性而言是极其繁琐的，这类属性在应用中会被许多组件使用 Context提供了一种在组件之间共享此类值的方式，而无需逐层传递props 何时使用 Context的设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主体或者首选语言 // Class组件使用Context const ThemeContext = React.createCont

打包 大多数React应用都会使用Webpack/Rollup/Browserify这类构建工具来打包文件 打包指的是将引入文件合并到一个单独文件的过程，最终形成一个bundle，接着在页面内引入该bundle，就可以一次性载入！ 如果你在使用 Create React App, Next.js, Gatsby等类似工具，你会拥有一个可以直接使用的Webpack配置来进行打包工作。 如果没有使用上述工具，就需要自己进行配置 代码分隔 尽管打包是个很棒的技术，但随着应用的增长和第三方库的增加，难免会出现页面