React教程：组件，Hooks和性能

因为把空数组作为第二个参数，以是上面的代码只运行一次。在这种环境下它相同于 componentDidMount，但稍后会触发它。假如你想在赏识器处理赏罚之前挪用一个相同的 hook，可以用 useLayoutEffect，但这些更新将会被同步应用，这一点与 useEffect 差异。

useContext 好像是最轻易领略的，由于我们提供了想要会见的上下文（由 createContext 函数返回的工具提供），而它为我们提供了该上下文的值。

const context = useContext(Context); 

最后，要编写本身的hook，你可以像这样写：

function useWindowWidth() {  
 let [windowWidth, setWindowWidth] = useState(window.innerWidth);  
 function handleResize() {  
   setWindowWidth(window.innerWidth);  
 }  
 useEffect(() => {  
   window.addEventListener('resize', handleResize);  
   return () => window.removeEventListener('resize', handleResize);  
 }, []);  
 return windowWidth;  
} 

根基上，我们行使通例的 useState hook，我们将其指定为窗口宽度的初始值，然后在 useEffect 中添加一个监听器，它将在窗口调解巨细时触发 handleResize。在组件被卸载后会我们会实时知道（查察 useEffect 中的返回值）。是不是很简朴？

留意： use 在 hook 中很重要。之以是行使它，是由于它应承 React 搜查你是否做了欠好的工作，譬喻从通例JS函数挪用hook。

范例搜查

在支持 Flow 和 TypeScript 之前，React有本身的属性搜查机制。

PropTypes 搜查 React 组件吸取的属性（props）是否与我们的内容同等。假如同等（譬喻：应该是工具而不是数组），将会在节制台中收到告诫。请务必留意：PropTypes 仅在开拓模式下举办搜查，由于它们会影响机能并在节制台中表现上述告诫。

从React 15.5开始，PropTypes 被放到了差异的包里，必要单独安装。它在名为 propTypes（surprise）的静态属性中对属性举办声明，可以把它与 defaultProps 团结行使，假如属性未界说就会行使它们（undefined是独一的环境）。 DefaultProps 与 PropTypes 无关，不外它们可以办来因为 PropTypes 而也许呈现的一些告诫。

其它两个选择是 Flow 和 TypeScript，它们此刻更受接待（出格是 TypeScript ）。

•  TypeScript是 Microsoft 开拓的 JavaScript 的范例超集，它可以在措施运行之前搜查错误，并为开拓事变提供卓越的自动完乐成能。它还极大地改进了重构进程。因为受到 Microsoft 的支持，它有富厚的范例说话特性，也是一个相等安详的选择。
•  Flow与TypeScript差异，它不是一种说话，而是 JavaScript 的静态范例搜查器，因此它更像是 JavaScript 中的器材而并非说话。 Flow 背后的整个思绪与 TypeScript 完全相似。它应承你添加范例，以便在运行代码之前杜绝也许呈现的错误。就像 TypeScript 一样，CRA（建设React App）从一开始就支持 Flow。

我发明 TypeScript 更快（险些是即时的），出格是在自动完成中，Flow 好像有点慢。值得留意的是，我本身用的 WebStorm 等 IDE 行使 CLI 与 Flow 集成。可是在文件中集成可选用法好像更轻易，只必要在文件开头添加 // @flow 就可举办范例搜查。其它据我所知，好像 TypeScript 最终赢得了与 Flow 的战斗 —— 它此刻更受接待，而且一些最风行的库正在从 Flow 转向 TypeScript。

官方文档中还提到了更多的选择，譬喻 Reason（由Facebook开拓并在React社区中得到遍及），Kotlin（由JetBrains开拓的说话）等等。

显然，对付前端开拓职员来说，最简朴的要领是行使 Flow 和 TypeScript，而不是切换到 Kotlin 或F#。可是，对付正在转型到前端的后端开拓职员来说，这也许更轻易入手。

出产模式和 React 机能

对支付产模式，你必要做的最根基和明明的改变是：把 DefinePlugin 切换到 “production”，并在Webpack的环境下添加UglifyJsPlugin。在行使 CRA 的环境下，它就像行使 npm run build（将运行react-scripts build）一样简朴。请留意，Webpack 和 CRA 不是独一的选项，由于你可以行使其他构建器材，如 Brunch。这凡是包括在官方文档中，无论是官方的 React 文得魅照旧特定器材的文档。要确保模式配置正确，你可以行使React Developer Tools，它会汇报你正在用的那种构建（出产与开拓）模式应该怎么设置。上述步调会使你的应用在没有来自 React 的搜查和告诫的环境下运行，而且 bundle 自己也将被最小化。

你还可觉得 React 应用做更多的事。你如那里理赏罚构建的 JS 文件？假如尺寸相对较小，你可以从 “bundle.js” 开始，可能做一些相同 “vendor + bundle” 可能 “vendor + 最小化必要部件 + 在必要时导入对象” 之类的处理赏罚。当你是处理赏罚一个很是大的应用时，不必要在一开始就导入全部内容。请留意，在主 bundle 中去 bundling 一些不会被行使的 JavaScript 代码只会增进 bundle 包的巨细，并会使应用在启动时的加载速率变慢。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!