React
day5-2
-
依赖
- react
- react-dom
-
React渲染
ReactDOM.render(VNode,target)
-
创建节点(VNode)
React.createElement(type,[props],[…children])
-
热更新(自动刷新浏览器)
原理:websocket
-
JSX
在js中编写HTML代码,在编译时webpack会通过特定的规则(loader)编译JSX代码到JS
- 编译规则
- 尖括号内以html代码规则编译
- 花括号内以js代码规则编译
- 关键字不能直接使用
- class -> className
- for -> htmlFor
- …
- 多个单词的属性必须使用驼峰形式
- autofocus -> autoFocus
- onkeyup -> onKeyUp
- …
- 必须闭合标签
- {}只能使用js表达式
- {1+1}
- {Number(‘345’)}
- {10>5?‘a’:‘b’}
- 编译规则
-
组件
- 规范
- 组件必须以首字母大写开头
- 只能有唯一的顶级标签
- 分类
- 函数组件(无状态组件、受控组件、UI组件)
利用函数来定义一个组件,函数必须有返回值
- 在实际开发过程中尽量使用函数组件,性能更好(因为没有实例化过程)
- 类组件(状态组件、非受控组件,容器组件)
利用class类创建的组件,继承自React.Component
- 在类组件中可以使用this、生命周期等特性
- 只有在render、constructor、生命周期函数中才有this指向,其他自定义的方法默认没有this指向
- 修改状态:重写一份数据并覆盖原来的数据
this.setState()
- 改变函数this指向
- fn.bind 改变函数fn的this指向,并返回一个新的函数,多次调用只在第一次生效
- 组件通讯
- 父->子:props
- 父组件设置子组件的属性,并传递数据
- 子组件通过props使用
- 函数组件:组件的第一个参数
- 类组件:this.props
- 父->子:props
- 函数组件(无状态组件、受控组件、UI组件)
- 规范
-
列表渲染
在JSX中不能直接渲染对象,但可以渲染数组,一般列表渲染都是用map方法
-
事件处理
- this指向的改变
- bind
- 初始化时
- 绑定事件时
- 箭头函数
- 定义时
- 绑定事件时
- bind
- event对象的获取
- 默认事件处理函数的最后一个参数
- 传参
- this指向的改变
-
获取真实DOM节点
- ref
- 回掉函数
ref={el=>this.el=el}
- 回掉函数
- ref
day5-3
复习
- JSX(在js代码中写html代码)
- 规则
- {} js规则
- <> html规则
- 组件:首字母大写
- 限制条件
- 关键字不能直接使用
- 多个单词的属性必须使用驼峰形式
- 必须闭合标签
- {}内必须为js表达式
- 规则
- 组件
必须首字母大写,只允许唯一顶级标签
- 分类
- 函数组件(无状态组件、受控组件、UI组件)纯函数
- 类组件(状态组件、非受控组件、容器组件)
- 状态
- 生命周函数
- this
- render()
- 分类
知识点
-
通讯
- 父->子:props
- 在父组件中定义子组件的属性,并传递数据
- 使用
- 函数组件:第一个参数
- 类组件:this.props
- 子->父
利用props传递方法到子组件执行
- 深层次组件通讯
- 逐层传递
- context
- 定义Context:
let MyContext = React.createContext()
- 父组件往context中写入共享数据
<MyContext.Provider value={data}></MyContext.Provider>
- 子组件使用context
- 类组件
SubComponent.contextType = MyContext this.context
- 函数组件
<MyContext.Consumer> { context=>{ // context中包含所有共享的数据 } } <MyContext.Consumer>
- 类组件
- 定义Context:
- 父->子:props
-
生命周期(类组件)
- 阶段
- Initial:初始化阶段
- constructor
- Mounting:已插入真实 DOM
- componentWillMount(不推荐)
- componentDidMount
- Updating:正在被重新渲染
- componentWillUpdate(不推荐)
- componentDidUpdate
组件在什么情况下会被刷新:1.props更新,2.state更新
- Unmounting:已移出真实 DOM
- componentWillUnmount
- Initial:初始化阶段
- 特殊生命周期函数
- componentWillReceiveProps(不推荐)
- shouldComponentUpdate
- 阶段
-
手动搭建React环境
- react&react-dom
- babel
* - webpack
- 项目构建工具
- grunt ->
- gulp ->
基于任务的构建工具,任何的操作都需要手动编写代码来实现
- webpack
基于配置的构建工具,用户只需要关注配置文件即可
gulp.task('compileJS',()=>{ gulp.src('src/js/xxx.js') .pipe(uglify()) .pipe(rename()) .pipe(gulp.dest('./dist')) })
- 配置文件:webapck.config.js
- 项目构建工具
day5-4
复习
-
深层次组件
- 逐层传递
- context
- 创建context:
let MyContext = React.createContext(defaultValue)
- 父组件定义共享的数据
<MyContext.Provider value={data}> // children </MyContext.Provider>
- 子组件获取数据
- contextType(只适用于类组件)
// 定义静态属性contextType SubComponent.contextType = MyContext this.context.data
- Consumer
<MyContext.Consumer> { context=>{ return } } </MyContent.Consumer>
- 创建context:
-
生命周期函数
- 初始化阶段
- constructor
- 挂载阶段
- componentDidMount
ajax
- componentDidMount
- 更新阶段
- componentDidUpdate
在此慎重修改state,避免死循环
- componentDidUpdate
- 销毁阶段
- componentWillUnmount
- 特殊生命周期
- shouldComponentUpdate
- 性能优化
- shouldComponentUpdate
- 初始化阶段
-
什么情况下会刷新组件
- state改变
- props改变
- 强制刷新:this.forceUpdate()
-
Webpack
- webpack的工作原理
- 从入口开始,逐层分析项目下的所有模块与依赖(包含第三方模块、图片、css等等),进项编译处理,并把它们打包成一个或多个文件
- 手动搭建React环境
- react&react-dom
- babel-loader&@bable/core&@babel/preset-react
- webpack&webpack-cli&webpack-dev-server
- 配置webpack.config.js
commonJS规范的模块
- entry 入口
- output 出口
- loader 加载器(module.rules)
- babel-loader
- plugin 插件
- html-webpack-plugin
- devServer 测试服务器
- contentBase
- mode(使用测试服务器时为development,编译时模式为production)
- production 生产环境
- development 开发环境
- webpack的工作原理