三大框架一大抄
什么是模块化:是从代码的角度来进行分析的;把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;
什么是组件化: 是从 UI 界面的角度 来进行分析的;把一些可服用的UI元素,抽离为单独的组件;便于项目的维护和开发;
**组件化的好处:**随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;
Vue是如何实现组件化的: 通过 .vue
文件,来创建对应的组件;
React如何实现组件化:大家注意,React中有组件化的概念,但是,并没有像vue这样的组件模板文件;React中,一切都是以JS来表现的;因此要学习React,JS要合格;ES6 和 ES7 (async 和 await) 要会用;
DOM的本质是什么:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API;
什么是React中的虚拟DOM:是框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套;
**为什么要实现虚拟DOM(虚拟DOM的目的):**为了实现页面中, DOM 元素的高效更新
DOM和虚拟DOM的区别:
**DOM:**浏览器中,提供的概念;用JS对象,表示页面上的元素,并提供了操作元素的API;
**虚拟DOM:**是框架中的概念;而是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;
**tree diff:**新旧两棵DOM树,逐层对比的过程,就是 Tree Diff; 当整颗DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
**component diff:**在进行Tree Diff的时候,每一层中,组件级别的对比,叫做 Component Diff;
**element diff:**在进行组件对比的时候,如果两个组件类型相同,则需要进行 元素级别的对比,这叫做 Element Diff;
npm init -y
快速初始化项目src
源代码目录和dist
产品目录index.html
cnpm i webpack webpack-cli -D
cnpm
: 全局运行 npm i cnpm -g
src
-> index.js
dist
-> main.js
mode
选项(为必选项),可选的值为:development
和 production
;运行 cnpm i react react-dom -S
安装包
ReactDOM.render()
在index.html
页面中,创建容器:
<div id="app">div>
导入 包:
import React from 'react'
import ReactDOM from 'react-dom'
创建虚拟DOM元素:
// 这是 创建虚拟DOM元素的 API 你比四环多一环
// 第一个参数: 字符串类型的参数,表示要创建的标签的名称
// 第二个参数:对象类型的参数, 表示 创建的元素的属性节点
// 第三个参数: 子节点
const myh1 = React.createElement('h1', { title: '啊,五环', id: 'myh1' }, '你比四环多一环')
渲染:
// 3. 渲染虚拟DOM元素
// 参数1: 表示要渲染的虚拟DOM对象
// 参数2: 指定容器,注意:这里不能直接放 容器元素的Id字符串,需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById('app'))
什么是JSX语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比HTML严谨很多)
如何启用 jsx 语法?
安装 babel
插件
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别转换jsx语法的包 babel-preset-react
cnpm i babel-preset-react -D
添加 .babelrc
配置文件
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
添加babel-loader配置项:
module: { //要打包的第三方模块
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
**jsx 语法的本质:**并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;
在 jsx 中混合写入 js 表达式:在 jsx 语法中,要把 JS代码写到 { }
中
在 jsx 中 写注释:推荐使用{ /* 这是注释 */ }
为 jsx 中的元素添加class类名:需要使用className
来替代 class
;htmlFor
替换label的for
属性
在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!
当 编译引擎,在编译JSX代码的时候,如果遇到了
<
那么就把它当作 HTML代码去编译,如果遇到了{}
就把 花括号内部的代码当作 普通JS代码去编译;
使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用
props
来接收;必须要向外return一个合法的JSX创建的虚拟DOM;
创建组件:
function Hello () {
// return null
return Hello 组件
}
为组件传递数据:
// 使用组件并 为组件传递 props 数据
// 在构造函数中,使用 props 形参,接收外界 传递过来的数据
function Hello(props) {
// props.name = 'zs'
console.log(props)
// 结论:不论是 Vue 还是 React,组件中的 props 永远都是只读的;不能被重新赋值;
return 这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}
}
父组件向子组件传递数据
使用{…obj}属性扩散传递数据
将组件封装到单独的文件中
注意:组件的名称首字母必须是大写
在导入组件的时候,如何省略组件的.jsx
后缀名:
// 打开 webpack.config.js ,并在导出的配置对象中,新增 如下节点:
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示,这几个文件的后缀名,可以省略不写
alias: {
'@': path.join(__dirname, './src')
}
}
在导入组件的时候,配置和使用@
路径符号
使用 class 关键字来创建组件
ES6 中 class 关键字,是实现面向对象编程的新形式;
constructor
的基本使用extends
关键字实现继承最基本的组件结构:
class 组件名称 extends React.Component {
render(){
return 这是 class 创建的组件
}
}
有状态组件和无状态组件之间的本质区别就是:有无state属性!
CommentList: [
{ id: 1, user: '张三', content: '哈哈,沙发' },
{ id: 2, user: '李四', content: '哈哈,板凳' },
{ id: 3, user: '王五', content: '哈哈,凉席' },
{ id: 4, user: '赵六', content: '哈哈,砖头' },
{ id: 5, user: '田七', content: '哈哈,楼下山炮' }
]
style
样式localIdentName
设置生成的类名称,可选的参数有:
:local()
和 :global()
React Developer Tools - Chrome 扩展下载安装地址
理解React中虚拟DOM的概念
理解React中三种Diff算法的概念
使用JS中createElement的方式创建虚拟DOM
使用ReactDOM.render方法
使用JSX语法并理解其本质
掌握创建组件的两种方式
理解有状态组件和无状态组件的本质区别
理解props和state的区别
2018 年,React 将独占前端框架鳌头?
前端框架三巨头年度走势对比:Vue 增长率最高
React数据流和组件间的沟通总结
单向数据流和双向绑定各有什么优缺点?
怎么更好的理解虚拟DOM?
React中文文档 - 版本较低
React 源码剖析系列 - 不可思议的 react diff
深入浅出React(四):虚拟DOM Diff算法解析
一看就懂的ReactJs入门教程(精华版)
CSS Modules 用法教程
将MarkDown转换为HTML页面
win7命令行 端口占用 查询进程号 杀进程
React Developer Tools - Chrome 扩展下载安装地址
使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用
props
来接收;必须要向外return一个合法的JSX创建的虚拟DOM;
创建组件:
function Hello () {
// return null
return Hello 组件
}
为组件传递数据:
// 使用组件并 为组件传递 props 数据
// 在构造函数中,使用 props 形参,接收外界 传递过来的数据
function Hello(props) {
// props.name = 'zs'
console.log(props)
// 结论:不论是 Vue 还是 React,组件中的 props 永远都是只读的;不能被重新赋值;
return 这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}
}
父组件向子组件传递数据
使用{…obj}属性扩散传递数据
将组件封装到单独的文件中
注意:组件的名称首字母必须是大写
在导入组件的时候,如何省略组件的.jsx
后缀名:
// 打开 webpack.config.js ,并在导出的配置对象中,新增 如下节点:
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示,这几个文件的后缀名,可以省略不写
alias: {
'@': path.join(__dirname, './src')
}
}
在导入组件的时候,配置和使用@
路径符号
使用 class 关键字来创建组件
ES6 中 class 关键字,是实现面向对象编程的新形式;
constructor
的基本使用extends
关键字实现继承最基本的组件结构:
// 如果要使用 class 定义组件,必须 让自己的组件,继承自 React.Component
class 组件名称 extends React.Component {
// 在 组件内部,必须有 render 函数,作用:渲染当前组件对应的 虚拟DOM结构
render(){
// render 函数中,必须 返回合法的 JSX 虚拟DOM结构
return 这是 class 创建的组件
}
}
注意:使用 class 关键字创建的组件,有自己的私有数据(this.state) 和 生命周期函数;
注意:使用 function 创建的组件,只有props,没有自己的私有数据和 生命周期函数;
有状态组件和无状态组件之间的本质区别就是:有无state属性、和 有无生命周期函数;
props
和 state/data
之间的区别
CommentList: [
{ id: 1, user: '张三', content: '哈哈,沙发' },
{ id: 2, user: '李四', content: '哈哈,板凳' },
{ id: 3, user: '王五', content: '哈哈,凉席' },
{ id: 4, user: '赵六', content: '哈哈,砖头' },
{ id: 5, user: '田七', content: '哈哈,楼下山炮' }
]
使用普通的 style
样式
启用 css-modules
修改 webpack.config.js
这个配置文件,为 css-loader
添加参数:
{ test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 为 .css 后缀名的样式表 启用 CSS 模块化
在需要的组件中,import
导入样式表,并接收模块化的 CSS 样式对象:
import cssObj from '../css/CmtList.css'
在需要的HTML标签上,使用className
指定模块化的样式:
评论列表组件
使用localIdentName
自定义生成的类名格式,可选的参数有:
相对于项目根目录
所在路径{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }
使用 :local()
和 :global()
:local()
包裹的类名,是被模块化的类名,只能通过className={cssObj.类名}
来使用
同时,:local
默认可以不写,这样,默认在样式表中定义的类名,都是被模块化的类名;
:global()
包裹的类名,是全局生效的,不会被 css-modules
控制,定义的类名是什么,就是使用定义的类名className="类名"
注意:只有.title
这样的类样式选择器,才会被模块化控制,类似于body
这样的标签选择器,不会被模块化控制;
把 自己的样式表,定义为 .scss
文件
第三方的 样式表,还是 以 .css
结尾
我们只需要为自己的 .scss
文件,启用模块化即可;
运行cnpm i sass-loader node-sass -D
安装能够解析scss
文件的loader
添加loader规则:
{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包处理 scss 文件的 loader
事件的名称都是React的提供的,因此名称的首字母必须大写onClick
、onMouseOver
为事件提供的处理函数,必须是如下格式
onClick= { function }
用的最多的事件绑定形式为:
// 事件的处理函数,需要定义为 一个箭头函数,然后赋值给 函数名称
show = (arg1) => {
console.log('show方法' + arg1)
}
在React中,如果想要修改 state 中的数据,推荐使用 this.setState({ })
在 Vue 中,默认提供了v-model
指令,可以很方便的实现 数据的双向绑定
;
但是,在 React 中,默认只是单向数据流
,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ; 如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听onChange
事件,拿到最新的数据,手动调用this.setState({ })
更改回去;
案例:
this.textChanged()} ref="mytxt" />
// 响应 文本框 内容改变的处理函数
textChanged = () => {
// console.log(this);
// console.log(this.refs.mytxt.value);
this.setState({
msg: this.refs.mytxt.value
})
}
和 Vue 中差不多,vue 为页面上的元素提供了 ref
的属性,如果想要获取 元素引用,则需要使用this.$refs.引用名称
在 React 中,也有 ref
, 如果要获取元素的引用this.refs.引用名称
生命周期的概念:每个组件的实例,从 创建、到运行、直到销毁,在这个过程中,会出发一些列 事件,这些事件就叫做组件的生命周期函数;
React组件生命周期分为三部分:
componentWillMount:
render:
componentDidMount:
componentWillReceiveProps:
shouldComponentUpdate:
componentWillUpdate:
render:
componentDidUpdate:
componentWillUnmount:
vue中的生命周期图
React Native 中组件的生命周期
在组件创建之前,会先初始化默认的props属性,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 constructor 构造器中的 this.state = {},来初始化组件的状态。
组件生命周期的执行顺序:
给 props
属性提供默认值 和 进行类型校验,需要先运行cnpm i prop-types --save
给组件的 props
提供默认值
// 为组件提供 默认的 props 属性值
static defaultProps = {
initcount: 0 // 默认值为0 如果用户没有传递 ,则 默认就是0; 如果用户传递了,则 以用户传递的为准
}
给组件的 props
进行类型校验
// 3. 进行 props 属性的类型校验, static propTypes = {} 是固定写法
static propTypes = {
initcount: PropTypes.number.isRequired // 规定 外界在传递 initcount 的时候,必须是 number 值类型,否则 ,会在终端报警告
// isRequired 表示 这个 props 属性值 是必须要传递的
}
类型校验
Animation Add-Ons