React

React中的state

上一节中我们学习了如何使用React的props来改变组件(UI)以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state,而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习,我们了解到props是纯静态的改变UI,而今天要聊的state是动态的,让你的组件真的能动起来,可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state,从而导致对应的UI更改(或内容的重新渲染)。如果你从未接触过或者想学习这方面的知识的话,欢迎继续往下阅读。

React中的props

组件是React中重要特性之一。我们可以将一个复杂的UI分解成多个基本组件。在开发了基本组件之后,我们可以将所需的组件组合在一起创建一个复杂的UI(也称为复杂的组件)。React中使用propsstate控制组件中的数据流。但刚接触React的同学对这些所谓的propsstate都会感到困惑,那么要掌握React就有必要掌握propsstate。在接下来的内容中我们主要围绕着React的propsstate和大家一起讨论。

React中列表渲染

在上一节中,我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染(在Vue中我们可以使用v-for指令)。因为在实际开发中我们时常要处理一些列表的渲染,比如在《列表渲染和Vue的v-for指令》一文中示例所示。在React中,处理列表渲染和处理条件渲染类似,需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话,欢迎继续往下阅读。

React中的条件渲染

在Web中时常需要根据不同的状态来渲染对应状态下的部分内容。在React中也同样有这样的运用场景,只不过在React中可以创建不同的组件来封装各种所需要的行为,然后根据不同状态来渲染对应的内容。如果你熟悉Vue的话,知道他有一个v-if指令可以轻易帮助你根据不同的状态(条件)来渲染所需的组件(或UI),但在React没有这样的指令。虽然在React中没有v-if这样的指令,但它可以使用你熟悉的JavaScript条件语句(比如if...elseswitch)。接下来,我们就一起来看看如何在React中实现条件渲染。

React中的事件

在大多的Web页面或Web应用程序中,构建UI仅仅是其中小小的一部分,其中有些UI是纯静态的,但有些UI是会随着用户的操作带来相应变化的。比如,用户通过鼠标点击,键盘按下,视窗大小调整或一系列其他的手势和交互来触发。而这些我们往往称之为事件。在Web中处理事件都是交给JavaScript来完成,同样的,在React中也有相应的事件。在这一节开始,我们就来学习React中的事件。你可能在DOM的世界中对事件的使用有一定的了解。如果没有,也不用担心,我们在开启探讨React的事件之前会对JavaScript中的事件做一个初步的了解。

初探React中函数组件和类组件的差异

自从React Hooks的出来,社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件,但是使用Hooks来构建组件时有一个巨大的可用性提升,特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。今天我们就来一起聊聊如何将React的类组件转换为函数组件,用React Hooks中的钩子函数替换类组件中的setState和生命周期方法,比如componentWillMountcomponentWillReceiveProps等。因此,让我们首先使用状态和生命周期方法构建一个基于类的React组件。也是大家最为熟悉的ToDoList组件。

React中创建组件的方式

学习React也有一段时间了,虽然天天都在围绕着组件打转转,但在React中怎么构建组件呢并没有去深入的了解。事实上呢?在React中的组件还是有些复杂的,从概念上来说就不简单。比如说,类组件函数组件无状态组件高阶组件等。另外创建组件的方式也有所不同,比如最早使用React.createClass来创建组件,有了ES6之后使用extends React.Component(借助ES6的class特性)创建组件,而今天又流行使用函数(Hooks)方式来创建组件。那么他们之间如何创建组件,又有何区别呢?在这篇文章中我们就先来学习和探讨在React中如何创建组件。

如何编写出优雅的JSX

前段时间在《深入了解JSX》一文中整理了JSX相关的知识和细节。作为一名Web开发者,不管写纯HTML模板代码还是现在在JSX中写JavaScript和HTML混合的代码,我们都应该有追求,那就是怎么写出更优雅、更具可读性和更易于维护的代码。那么在这篇文章中我们就来一起聊聊如何写出更优雅的JSX代码。

学习React应该具备的JavaScript基础知识

React是众多主流JavaScript框架之一,如果想要较好的掌握React,那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼,觉得掌握了JavaScript框架就可以无敌,事实上并非如此,至少Web发展至今,HTML、CSS和JavaScript还是Web三大基石。只有更好的掌握这些基础,在平时的工作中才能游刃有余。在接下来的内容中,我们就来一起探讨一下,在学习React的时候,应该具备哪些JavaScript相关的知识,这样才能更有助于我们更好的掌握React。

CSS 自定义属性在Web组件中的应用

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

页面

返回顶部