React
2020-09-01 22:23:51 0 举报AI智能生成
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封装暴露函数
0 条评论
下一页
