《计算机专业实用技能导引 (16).pdf》由会员分享，可在线阅读，更多相关《计算机专业实用技能导引 (16).pdf（3页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、React 进阶 本档默认你已经基本理解了 React 之中的组件、参数、状态等核概念。本档将更倾向于介绍实际开发之中可能使的思维式和些技巧。命周期法 React.Component 这个类之中除去 render/setState 这两个重要法，还具有些命周期法。所谓命周期法，则是组件从挂载到卸载的关键时间点上会被动执的法。我们讲述过 React 的作原理是将我们编写的组件渲染到 HTML 容器上，那么具体的过程应当包括：准备挂载，这个时候参数会被传递到组件的构造函数之中，实例化个组件，同时创设相应的state。挂载组件，这个时候框架调 render 函数，成组件的展示式并渲染，挂载完毕之后会
2、使React.ComponentReact.Component 类之中定义的 ComponentDidMountComponentDidMount 命周期法，表示组件挂载完毕。监听组件的 setState 法调，旦组件的状态改变，就代表着可能会导致组件的显示式改变，此时框架会重新调 render 函数进重新渲染。卸载组件，当组件需要被移除的时候，在卸载之前会调 React.ComponentReact.Component 类之中定义的ComponentWillUnmountComponentWillUnmount 命周期法，表示即将卸载组件。这提到的两个命周期法实际上代表了组件命的开始和命的结
3、束。在实际的开发之中，很多时候组件具体要显示的信息需要从络获取。我们显然需要在真实渲染出组件之前就获取到这些信息，这个时候我们就需要使 ComponentDidMount 法，在这个法内部实现信息拉取。另外，有的时候我们需要使的计时器这类对象，计时器般和组件的命周期保持致，所以我们也需要在相应的命周期法内创设和销毁计时器。反向数据流 我们说过 React 框架之中的瀑布数据流，即控制组件的数据流是通过参数由上下传递的。但是在实际开发之中，完全由上下的数据流并不能满所有需求。种很常的例就是组件向上传递的状态，例就是分器。先前下发的分器源代码之中只是定义了 Paginator 这个组件，但实际上的
4、分器般只是个组件之中的个部分，但是却是决定整个组件所显示的内容的部分。所以说我们需要有种法将分器前所在位置传达到其组件上。也就是说我们需要反向数据流。反向数据流很常的法是通过 propsprops 传递能够改变组件 statestate 的回调函数。这种法可以类于组件将修改某个状态的权限赋予组件。注解：估计你也已经注意到了，即使添加了反向数据流，React 度严格化的数据管理式只允许了之间的直接数据交流，对于更庞的前端设计，仅仅允许交流并不定可。这介绍个更为现代化的第三库，即 redux。其允许了所有组件之间共享某些状态，并且允许组件绑定这些状态和能够修改这些状态的回调函数。这部分将会交由你们
5、探索。函数组件 我们通过类组件给家介绍了组件的概念，这是因为我们认为从数据成员的度，通过 OOP 的思维去理解 state 更为简单。但实际上 React 的组件的思想更像是函数。如果不考虑 state，实际上我们也已经提到这个时候的组件只受到 props 控制，和输出仅仅和参数有关的纯函数并没有差别。基于此，我们可以将没有 state 的正形组件修改为：个组件接受 props 的控制，返回这个组件的展示式，这就是函数组件。函数组件除了写法上稍有不同，使上和类组件并差别。Hooks 但是对于具有 state 的组件，可能就不太好直接修改为函数组件了。现代的 React 框架为函数组件提出了钩（
6、Hooks）的概念，通过 Hooks，我们可以给函数组件添加state，甚还可以继续使命周期法。常的 Hooks 包括 useState/useEffect，课程之中也只会讲解这两个，其余的些更为复杂的Hooks 则交由你们探索。Thinking in React（设计哲学）经过以上课程的学习我们默认你已经：理解组件化、参数、状态这三个 React 核概念能够使命周期法丰富组件能够使回调函数添加反向数据流对于函数组件，这我们不作过多要求，因为除去编写，其使体验和类组件乎没有差别。在后续程之中，具体使函数组件还是类组件完全取决于程需要和你，不过我们更为推荐使函数组件。那么我们不妨在课上尝试写个稍
7、稍有实际意义的 React 应，如说能够分的商品列表。你可以尝试感受从静态 UI 开始到动态交互设计的 React 设计哲学。希望能通过这个的 demo，能让你具有点点，从甲给出的需求开始分析，到构建出完整的前端应的能。些未尽的话题 const Square=(props:SquareProps):ReactElement=();实际开发过程中，所使到的核思想，本课程基本已经介绍完毕，剩余的只是家多多使 React 以提熟练度，多多在社区闲逛去识更多的项和第三库。这暂且举出我们认为在软件程课程之中会较为有的第三库，供家探索：AntDesign。该库提供了量的已经完成设计的现成组件，可以免去动调节 CSS 的烦恼，可以让你在短时间内写出美观的前端（但该做的交互设计、结构设计免不掉，这是你的任务）。redux。该库允许每个组件共享些状态，可以不受瀑布数据流的严格制约实现更为由的数据流（但定需要注意合理设计数据存储和管理式）。