小海前端-CSDN博客

原创 React（10）React Context技术（2）

文章目录前言一、案例：更改页面的主题1、案例要求：2、案例分析：3、案例组件划分：4、组件的实现：5、组件的实现：二、ContextType技术三、Context的默认值总结关于作者前言承接上一篇关于React Context技术的文章。React Context技术在页面主题修改应用上提供了较好的方法，同时React还提供了ContextType技术，用于实现对Context技术进行简化书写。本篇文章对这两个概念进行讲解，最后再讲解Context默认值的使用方法。在开始正式讲解之前，再次强调Re

2021-01-18 15:41:34 411 1

原创 React（9）React Context技术（1）

文章目录前言一、React Context的基本用法1、Provider组件2、Consumer组件3、基本使用案例二、滑动门案例1、父组件App的实现2、子组件Detail的实现三、多Context数据的使用总结关于作者前言为了让组件之间数据传递更加的方便与快捷，React提供了React Context技术。该技术能够简洁的在组件之间传递数据，不仅能完成父子组件之间数据的传递，也能够在多层次组件之间传递数据。本篇文章将详细地讲解React Context技术并展示该技术的功能案例。在开始正式讲

2021-01-13 18:43:12 310

原创 React（8）React组件的生命周期

文章目录前言一、React组件的生命周期二、React组件的挂载阶段1、constructor()构造函数2、getDerivedStateFromProps()生命周期函数3、render()渲染函数4、componentDidMount()生命周期函数三、React组件的更新阶段1、shouldComponentUpdate()生命周期函数2、getSnapshotBeforeUpdate()生命周期函数3、componentDidUpdate()生命周期函数四、React组件的卸载阶段总结关于作者

2021-01-12 18:17:04 345 1

原创 React（7）React非受控组件的使用

文章目录前言一、非受控文本框的使用二、非受控select菜单的使用三、非受控select列表的使用四、React文件域的使用总结关于作者前言上一篇文章我们系统讲解了React表单受控组件的使用，对于文本框、列表、菜单来说，采用value-onChange组合来实现。对于单选框、复选框来说，采用checked-onChange组合来实现。除了受控组件，React还提供了非受控组件，本篇文章来为大家讲解非受控组件的使用方法。非受控组件是指表单元素的操作不受组件中state区数据的控制，也不需要将表单元素

2021-01-04 20:38:58 310

原创 React（6）React受控组件的使用

文章目录前言一、文本类表单元素的受控控使用方法二、单选框的受控使用方法三、复选框的受控使用方法四、菜单的受控使用方法五、列表的受控使用方法1、不借助键盘快捷键实现多选。2、借助键盘快捷键实现多选。总结关于作者前言在一个实际的项目中，表单是必不可少的DOM元素。项目中出现的表单元素，React要如何获取用户在表单元素中书写或选择的内容呢？本篇文章就为大家讲解React中受控组件的使用方法。受控组件：Controlled Component，组件的数据受到state组件状态的控制，我们将这类组件称为“受

2021-01-02 19:34:00 508

原创 React（5）React兄弟组件之间的通信

文章目录前言一、兄弟组件之间的通信原理二、三个组件的基本结构1、子组件ColorSelector的基本结构2、子组件ColorBoard的基本结构3、父组件Color的基本结构三、ColorSelector向Color传递数据四、Color向ColorBoard传递数据五、项目完整代码总结关于作者前言上一篇文章我们通过一个ToDoList案例，系统的讲解了React父子组件之间的通信。本篇文章我们依然通过一个实用的案例来为大家讲解React兄弟组件之间的通信。一、兄弟组件之间的通信原理React

2020-12-30 09:52:55 5807

原创 React（4）React 父子组件之间的通信

文章目录前言约定一、父组件向子组件传递数据二、子组件向父组件传递数据三、案例：ToDoList1、父子组件的基本格式2、在父组件中处理文本框3、父组件“添加待办事件”按钮的单击事件4、父组件向子组件传递数据5、删除待办事项四、ToDoList案例的完整代码总结关于作者前言组件化开发是现代前端框架的重要特点，一个完整的React项目不可能只具备一个组件。当组件数量较多时，数据必然会在组件之间进行必要的传递。我们将数据在组件之间的传递过程称为“组件之间的通信”。归纳起来，从通信方向上来讲包括以下两种：

2020-12-28 14:08:05 535

原创 React（3）React 组件

文章目录前言一、使用ES6的class关键字创建组件二、为组件设置状态区三、为组件中的元素绑定事件四、确保组件方法中的this指向组件本身1、调用方法时使用bind(this)来改变方法内部this的指向。2、在构造函数中注册方法。3、在调用方法时使用箭头函数。总结关于作者前言React框架是一个组件化的框架，为了适合大型项目的开发，React将项目分割成一个个的组件，并频繁地在组件之间传递数据。可以说要想学好React框架的使用，需要能够灵活地操作组件。本文重点介绍React组件的书写方式，并给出组

2020-12-25 11:18:20 427 1

原创 React（2）认识JSX语法格式

文章目录前言一、JSX语法的基本用法1、使用变量定义JSX元素2、使用变量定义嵌套的JSX元素3、在JSX元素中使用变量4、在JSX元素中调用函数二、JSX元素的语法规定三、在JSX格式中遍历数组四、在JSX格式中使用if语句1、使用三元运算符在JSX中实现判定2、使用逻辑与运算符的短路原理实现判定3、在JSX格式以外借助变量使用if语句完成判定4、在JSX格式以外借助函数使用if语句完成判定总结关于作者前言React框架推荐使用的DOM语法格式为JSX语法，属于一种JavaScript扩展，Reac

2020-12-24 15:39:45 1397 3

原创 React（1）初识React框架

文章目录前言一、搭建React工作环境二、第一个React程序三、初步认识JSX语法：总结关于作者前言React框架在现代前端开发的项目中越来越常用，该框架的语法结构也深深的影响着其他框架在设计时的思路和理念。本专栏从这篇文章开始，以零基础出发，一步步总结和讲解React框架的使用。一、搭建React工作环境首先我们先来将React工作环境搭建起来。要想让React工作起来，需要用到下列三个库：react.development.js：React核心库。react-dom.developm

2020-12-23 18:02:43 466

原创前端开发中的文件处理功能：认识Files类与File类

文章目录前言一、HTML5为文件域新增的属性二、认识Files类1、如何创建Files类的实例2、Files类的属性3、Files类的方法三、认识File类1、如何创建File类的实例2、File类的属性四、认识单页面文件的有效地址1、blob地址和base64地址2、如何获得blob地址3、利用blob地址展示图片预览五、FileReader类1、FileReader类的功能2、创建FileReader类的实例3、FileReader类的方法4、FileReader类的属性5、FileReader类的事件

2020-12-15 18:27:02 2514

原创微信小程序页面与web-view页面之间的跳转

文章目录前言一、web-view组件的使用二、web-view页面跳转回小程序页面1、在H5页面引入JSSDK2、为需要跳转至小程序页面的元素绑定事件总结关于作者前言微信小程序允许将外部的H5页面在整个小程序页面中展示出来，该功能使用的是web-view组件。该组件的技术文档如下所示。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.htmlweb-view组件的本质是使用浮动框架标记对 iframe来对sr

2020-12-10 17:24:59 5068

原创微信小程序中的表单验证机制

文章目录前言一、WxValidate类的构造函数1、参数rules2、参数messages3、创建WxValidate类的实例二、WxValidate的内置校验规则三、WxValidate的表单验证方法四、WxValidate类在小程序页面中的部署总结关于作者前言微信小程序中的表单要进行验证，可以使用第三方插件：WxValidate.js。该插件约有12.8KB左右，采用ES6中class类的方式进行编写，所定义的类名为WxValidate，并最终将该类导出。本文将详细讲解WxValidate.js插

2020-12-09 21:38:20 2750

原创 Element UI 中表单元素的验证机制

文章目录前言一、Element UI中表单元素的验证规则二、async-validator 的验证规则1、required2、type3、enum4、message5、trigger6、min、max7、len8、pattern9、validator三、两个官网案例总结前言Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub的地址是 https://github.com/yiminghe/async-validator，至今在 Git

2020-12-08 17:50:07 1975

原创原生页面兼容IE9问题的解决方案

文章目录前言一、强制360浏览器使用极速模式访问二、IE9对CSS3的支持1、盒模型布局2、IE9对弹性盒布局的支持3、IE9不支持下列CSS3属性4、IE9不支持下列CSS选择器三、IE9对jQuery的支持四、IE9不支持placeholder属性1、普通文本框的解决方案2、密码域的解决方案总结前言最近，接了一个客户的原生页面。客户要求该页面必须兼容IE9及其以上版本的浏览器，同时要求360浏览器的兼容模式可以正常访问。360浏览器是可以通过代码强制极速模式的，这个问题比较容易解决。但是要兼容IE

2020-12-07 00:52:41 1017 1

原创在原生开发中控制HTML5视频

文章目录前言一、video标记对的属性二、video标记对的方法三、video标记对的事件四、PC端video标记对的问题1、视频如何自动播放2、视频的全屏播放3、视频全屏后导致的垂直滚动条问题五、移动端video标记对的问题1、【IOS】iPhone系列手机中视频的内联播放问题2、【Android】多个视频同时播放问题3、在移动端自定义视频的控制按钮4、补充：移动端如何判断用户设备是IOS设备还是Android设备5、补充：【IOS】为适配iPhoneX设备制作两套页面总结前言有人可能会问，在如今各

2020-12-03 16:48:40 3179 9

原创如何操作小程序页面中data数据区中的数据

文章目录前言一、输出数据区中的数据：二、修改数据区中的数据：1、修改数据区中的基本数据类型数据：2、修改数据区中的数组数据：3、修改数据区中的数组元素：4、修改数据区中的对象成员：5、修改数据区中JSON数组中的成员：6、结合循环变量修改JSON数组：总结前言在微信小程序中，每一个页面都有一个独立的js文件，用来实现该页面的业务逻辑。这个js文件通常采用Page()方法来对页面进行注册。其中系统为页面设置了一个名为data的区域，用来存储页面的初始数据，我们将其称为小程序页面的数据区。小程序页面的

2020-12-02 17:11:13 9704 1

小海前端