小海前端

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

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

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

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

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

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

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

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

文章目录前言一、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

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