登录免费注册

首页  思维导图  详情



 



React

React

2020-09-01 22:23:51   0  举报





仅支持查看

AI智能生成

react框架知识点回顾

react

模板推荐

作者其他创作

大纲/内容

技术点回顾

jsx

what jsx

js文件里的html标签就是一个jsx对象

如何渲染js表达式

利用一个大括号{}

底层原理

通过React.createElement创建的虚拟DOM

注意事项

必须有跟标签包裹

绑定事件用驼峰命名 onClick...

style接收一个函数作为对象{{color：'red'}}

类名className

列表渲染

jsx能够自动jsx数组

思路：把数据用map方法转换成jsx数组

组件

概念：具有独立功能的UI部件

定义

首字母大写的js文件

文件中导出组件

使用

引入组件

使用标签实例化组件

组件通信

父子组件

父》》子 props

子》》父 props  注：props必须是函数

兄弟组件

状态提升

复杂关系组件

状态机

路由

本地

条件渲染

&&

三目运算

表单组件

受控组件

不受控组件

ref

获取Don

获取实例

生命周期

挂载阶段

constructor

render

componentDidMount

运行阶段

shouldComponentUpdate

PureComponent

render

componentDidupdate

卸载阶段

componentWillUnMount

环境搭建

电脑环境

node npm/yarn包管理

chorme//ff//ie

vscode/hbuilder/sublime

ps axure

项目环境

新建一个空项目文件在里面在里面执行cmd命令 npx create-react-app 项目名称

进入项目跟目录   yarn start

项目结构

脚手架  清除原始目录 创建核心目录

样式scss

下载node-sass

建立scss后缀的样式文件

引入重置样式reset

ui架构（antd）

新建页面，配置路由

下载路由 yarn add react-routu-dom

配置路由

hashRouter Switch Route  Redirect Link 

高价组件willRouter

前后端交互采用axios

下载

把所有接口统一封装成函数，然后在api文件下统一管理

采用axios拦截器，提取所有公共逻辑

状态机redux管理公共数据

下载 yarn add redux react-redux

准备store

创建store

通知对象action

修改者reducer

将store数据注入组件树顶层 

Procider插槽上导入

组件订阅store中的数据

connect封装暴露函数

 Collect

Get Started

react项目架构

为什么现在主流 Agent 都采用 ReAct？

 Collect

Get Started

为什么现在主流 Agent 都采用 ReAct？

 Collect

Get Started

react-dom

 Collect

Get Started

我的React知识体系













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document