react的思维导图

image.png

一、react介绍

wecom-temp-32246bbb088bcef371bc1fd65ce5378b.png

二、UI界面

2.1 JSX基础

wecom-temp-4253d108d36ae4bb2b2ee045e8cdeaa5.png

2.2 数据渲染

wecom-temp-730849989bf179689ff554e0e86d7038.png

wecom-temp-e4d053949c39c001df4dba23ed3c7ff1.png

三、React与React Redux

3.1 React

wecom-temp-e99fb1b25ff5516a5ea8e6b867c4f895.png

wecom-temp-1bf53014072ed72bb4e21ab6e901b4e0.png

3.2 React Redux

wecom-temp-b98eb575727b0026abef33cd4793a70c.png

四、组件

4.1 组件化思想

wecom-temp-8202695f5e8c529ae6b6b9eded7eb37b.png

4.2 类组件

wecom-temp-c7b44d760bc2bd08c376e9a84f79e58f.png

wecom-temp-d0728449aabd216af43d982eef84cec0.png

wecom-temp-bfecce6bf7e4417daf796a0dd6f85c76.png

wecom-temp-db596d0c6b5a7505523b9f5fe9e17086.png

4.3 函数组件

wecom-temp-17a677b066ffeddc13e16393af747751.png

wecom-temp-834e7fe37d8a0cfc77baa0f40a016354.png

wecom-temp-c229804bea095ceeec864a73490ebaeb.png

wecom-temp-ad491d1e650aa62508450dcf16a0da8b.png

wecom-temp-2c9c90c297c55cac33edc8f9eed18d3a.png

wecom-temp-2c9c90c297c55cac33edc8f9eed18d3a.png

wecom-temp-49f6d503079f40809e2e8b31c337b1ba.png

4.4 高阶组件

wecom-temp-55f6c4980486e7912bd4f56b209837fc.png

学习完一个技术框架,使用思维导图可以加深记忆,一边写一边理解,整挺好的
复制代码

借鉴 微信公众号:前端点线面--一张思维导图入门React

Guess you like

Origin juejin.im/post/7068958844818620424