From 8ce91223be8ddeb6b8dcc1c1fd039b7314c4c14e Mon Sep 17 00:00:00 2001 From: xuwu Date: Wed, 6 Oct 2021 14:42:52 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 92 +++++++++++++++++++++++++++---------------------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 3efd83c..e54f82b 100644 --- a/README.md +++ b/README.md @@ -537,25 +537,25 @@ Virtual DOM 也就是虚拟节点。通过 JS 的 Object 对象模拟 DOM 中的 ### 如何编写一个组件 -- [ ] 文档 - - [ ] [React 官方文档](https://reactjs.org/docs/components-and-props.html) -- [ ] 推荐文章 - - [ ] [[译]React 函数组件和类组件的差异](https://jishuin.proginn.com/p/763bfbd4cad4) - - [ ] [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) - - [ ] [React 复合组件](https://www.smashingmagazine.com/2021/08/compound-components-react/) +- 文档 + - [React 官方文档](https://reactjs.org/docs/components-and-props.html) +- 推荐文章 + - [[译]React 函数组件和类组件的差异](https://jishuin.proginn.com/p/763bfbd4cad4) + - [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) + - [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) + - [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) + - [React 复合组件](https://www.smashingmagazine.com/2021/08/compound-components-react/) ### 受控组件和非受控组件 - 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 - 非受控组件：是一个存储其自己的内部状态，并且您使用查询 DOM ref，当你需要它来找到它的当前值，这有点像传统的 HTML -- [ ] 文档 - - [ ] [React 官方文档](https://reactjs.org/docs/uncontrolled-components.html) -- [ ] 推荐文章 - - [ ] [受控和非受控组件真的那么难理解吗](https://juejin.cn/post/6858276396968951822) - - [ ] [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/controlled-components-and-uncontrolled-components/) +- 文档 + - [React 官方文档](https://reactjs.org/docs/uncontrolled-components.html) +- 推荐文章 + - [受控和非受控组件真的那么难理解吗](https://juejin.cn/post/6858276396968951822) + - [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/controlled-components-and-uncontrolled-components/) ### 高阶组件（HOC） @@ -563,69 +563,69 @@ Virtual DOM 也就是虚拟节点。通过 JS 的 Object 对象模拟 DOM 中的 具体而言，高阶组件是参数为组件，返回值为新组件的函数。 -- [ ] 文档 - - [ ] [React 官方文档](https://reactjs.org/docs/higher-order-components.html) -- [ ] 推荐文章 - - [ ] [React 高阶组件(HOC)入门指南](https://github.com/MrErHu/blog/issues/4) - - [ ] [hoc 库 recompose](https://github.com/acdlite/recompose) - - [ ] [精读 React 高阶组件](https://zhuanlan.zhihu.com/p/27434557) +- 文档 + - [React 官方文档](https://reactjs.org/docs/higher-order-components.html) +- 推荐文章 + - [React 高阶组件(HOC)入门指南](https://github.com/MrErHu/blog/issues/4) + - [hoc 库 recompose](https://github.com/acdlite/recompose) + - [精读 React 高阶组件](https://zhuanlan.zhihu.com/p/27434557) ### Hooks Hook 是 React 16.8 的新增特性。它可以让你在不编写类组件的情况下使用 React 的特性。 -- [ ] 文档 - - [ ] [React Hooks 官方文档](https://zh-hans.reactjs.org/docs/hooks-intro.html) -- [ ] 推荐文章 - - [ ] [彻底理解 React hook useCallback 和 useMemo 的区别](https://juejin.cn/post/6844904032113278990) - - [ ] [React hooks 最佳实践](https://mp.weixin.qq.com/s/0sykIHDM_Ih3W3md-DwFkw) +- 文档 + - [React Hooks 官方文档](https://zh-hans.reactjs.org/docs/hooks-intro.html) +- 推荐文章 + - [彻底理解 React hook useCallback 和 useMemo 的区别](https://juejin.cn/post/6844904032113278990) + - [React hooks 最佳实践](https://mp.weixin.qq.com/s/0sykIHDM_Ih3W3md-DwFkw) ### 合成事件 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 [W3C 规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。 -- [ ] 文档 - - [ ] [React 官方文档](https://reactjs.org/docs/events.html) -- [ ] 推荐文章 - - [ ] [探索 React 合成事件](https://segmentfault.com/a/1190000038251163) - - [ ] [大佬，怎么办？升级 React17，Toast 组件不能用了](https://zhuanlan.zhihu.com/p/380941094) - - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) +- 文档 + - [React 官方文档](https://reactjs.org/docs/events.html) +- 推荐文章 + - [探索 React 合成事件](https://segmentfault.com/a/1190000038251163) + - [大佬，怎么办？升级 React17，Toast 组件不能用了](https://zhuanlan.zhihu.com/p/380941094) + - [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 + - [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) ### React 路由 -- [react-router](https://github.com/remix-run/react-router) -- [reach router](https://github.com/reach/router) +- [react-router](https://github.com/remix-run/react-router)，React 声明式路由 +- [reach router](https://github.com/reach/router)，下一代的 React 路由 ### React 状态管理 React 状态管理可谓百花齐放百家争鸣，远远不止笔者列的这些库。但是实际上很多项目完全是不需要用到状态管理的，反而是增加编码复杂度，其实利用 React Context 或者 [react-query](https://github.com/tannerlinsley/react-query) 这类接口请求库就能很好地满足需求了。 -- [redux](https://github.com/reduxjs/redux) -- [mobx](https://github.com/mobxjs/mobx) -- [recoil](https://github.com/facebookexperimental/Recoil) -- [xstate](https://github.com/statelyai/xstate) -- [zustand](https://github.com/pmndrs/zustand) +- [redux](https://github.com/reduxjs/redux)，JS 应用的状态容器，提供可预测的状态管理 +- [mobx](https://github.com/mobxjs/mobx)，简单，可扩展的状态管理库 +- [recoil](https://github.com/facebookexperimental/Recoil)，React 状态管理库 +- [xstate](https://github.com/statelyai/xstate)，有限状态机 +- [zustand](https://github.com/pmndrs/zustand)，简单、快速和可扩展的骨状态管理解决方案 ### React 接口请求 -- [axios](https://github.com/axios/axios) -- [react-query](https://github.com/tannerlinsley/react-query) -- [swr](https://github.com/vercel/swr) +- [axios](https://github.com/axios/axios)，传统接口请求库 +- [react-query](https://github.com/tannerlinsley/react-query)，用于获取、缓存和更新 React 中异步数据的 Hooks 接口请求库 +- [swr](https://github.com/vercel/swr)，用于数据请求的 React Hooks 库 ### React SSR -- [nest.js](https://github.com/nestjs/nest) +- [nest.js](https://github.com/nestjs/nest)，一个渐进式的 Node.js 框架，用于构建高效、可靠和可扩展的服务端应用。 ### React 单测 -- [jest](https://github.com/facebook/jest) -- [react-testing-library](https://github.com/testing-library/react-testing-library) +- [jest](https://github.com/facebook/jest)，优雅、简洁的 JavaScript 测试框架，单测必选项 +- [react-testing-library](https://github.com/testing-library/react-testing-library)，简单且完整的 React DOM 测试工具 ### React CSS 方案 -- [styled-components](https://github.com/styled-components/styled-components) -- [tailwindcss](https://github.com/tailwindlabs/tailwindcss) +- [styled-components](https://github.com/styled-components/styled-components)，CSS in JS 方案 +- [tailwindcss](https://github.com/tailwindlabs/tailwindcss)，Atom CSS 方案 ### 原理