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 包的大小，并会使应用在启动时的加载速度变慢。

（编辑：好传媒网）

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