学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
例如,假设有一个CommentList组件,它订阅外部数据源,用以渲染评论列表:
class CommentList extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
// 假设 “DataSource” 是个全局范围内的数据源变量,即所有组件都可以拿到
comments: DataSource.getComments()
};
}
componentDidMount() {
// 订阅更改
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// 清除订阅
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
// 当数据源更新时,更新组件状态
this.setState({
comments: DataSource.getComments()
});
}
render() {
return (
{this.state.comments.map((comment) => (
))}
);
}
}
主要观察上面的代码,稍后,编写了一个用于订阅单个博客帖子的组件,该帖子遵循类似的模式:
class BlogPost extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
// 同样,使用全局数据源
blogPost: DataSource.getBlogPost(props.id)
};
}
componentDidMount() {
// 订阅更改
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// 清除订阅
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
blogPost: DataSource.getBlogPost(this.props.id)
});
}
render() {
return ;
}
}
有没有发现,CommentList和BlogPost不同 - 它们在数据源DataSource上调用不同的方法,且渲染不同的结果。但它们的大部分实现都是一样的:
-
在挂载时,向
DataSource
添加一个更改侦听器。 -
在侦听器内部,当数据源发生变化时,调用
setState
。 -
在卸载时,删除侦听器。
你可以想象,在一个大型应用程序中,这种订阅DataSource和调用setState的模式将一次又一次地发生。我们需要一个抽象,允许我们在一个地方定义这个逻辑,并在许多组件之间共享它。这正是高阶组件擅长的地方。
对于订阅了DataSource的组件,比如CommentList和BlogPost,我们可以编写一个创建组件函数。该函数将接受一个子组件作为它的其中一个参数(可以是多个参数),该子组件将订阅数据作为 prop。
//withSubscription为高阶组件,复用逻辑提取到里面
const CommentListWrapper = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWrapper = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
//CommentListWrapper、BlogPostWrapper分别为扩展(共享逻辑)之后的新组件
第一个参数是被包装组件。第二个参数通过DataSource和当前的 props 返回我们需要的数据。当渲染这两个组件时,CommentList和BlogPost将传递一个data prop,其中包含从DataSource检索到的最新数据:
// 此函数接收一个组件
function withSubscription(WrappedComponent, selectData) {
// 并返回另一个组件
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props) //DataSource全局数据源
};
}
componentDidMount() {
// 负责订阅相关的操作
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// 清除订阅
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// 并使用新数据渲染被包装的组件!
// 请注意,我们可能还会传递其他属性
return <WrappedComponent data={this.state.data} {…this.props} />;
}
};
}
请注意,HOC 不会修改传入的组件,也不会使用继承来复制其行为。相反,HOC 通过将组件_包装_在容器组件中来_组成_新组件。HOC 是纯函数,没有副作用。
被包装组件接收来自容器组件的所有 prop,同时也接收一个新的用于 render 的data prop。HOC 不需要关心数据的使用方式或原因,而被包装组件也不需要关心数据是怎么来的。
因为withSubscription是一个普通函数,你可以根据需要对参数进行增添或者删除。例如,您可能希望使data prop 的名称可配置,以进一步将 HOC 与包装组件隔离开来。或者你可以接受一个配置shouldComponentUpdate
的参数,或者一个配置数据源的参数。因为 HOC 可以控制组件的定义方式,这一切都变得有可能。
与组件一样,withSubscription和包装组件之间的契约完全基于之间传递的 props。这种依赖方式使得替换 HOC 变得容易,只要它们为包装的组件提供相同的 prop 即可。例如你需要改用其他库来获取数据的时候,这一点就很有用。
以上就是官网高阶组件的经典例子,描述的也比较清楚,如果还不太明白,接下来看一个非常简单的实例,帮助大家理解。
现在,有两个组件,分别是Page和OtherPage:
//Page.js
import React from ‘react’;
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: ‘’,
user: ‘’,
title: ‘Page’
}
}
componentDidMount(){
let greet = sessionStorage.getItem(‘greet’)
let name = sessionStorage.getItem(‘name’)
this.setState({
msg: greet,
user: name
})
}
render(){
return (
{this.state.title}
{this.state.msg}
{this.state.user}
)
}
}
export default Page
(主要观察两个组件之间的逻辑与功能 )
//OtherPage.js
import React from ‘react’;
class OtherPage extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: ‘’,
user: ‘’,
title: ‘OtherPage’
}
最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价,看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战,如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件
WMxLnpoaW1nLmNvbS84MC92Mi04YTY0YTU3YTdlNDFmZDc3OTRiZWYzNjVkYjNlYzQxMF9oZC5qcGc?x-oss-process=image/format,png)
前端高级实战,如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件