杜小白的博客

最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤：1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选；2. 定义全选checkbox的change函数，为true则遍历list中所有元素，将其checked置为true，反之，置为false；3. 定义list中单个checkbox的change函数，控制list中当前元素是否勾选，同时判断全选是否应该勾选；importReact,{useState}from'reac...

    JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。    对于Web项目而言，React的JSX提供了一组类似于HTML的XML标签，转译后，XML会被转译为针对React库的函数调用，如下：<h1>Hello World</h1>会被转译为：React.createElemen...

为了方便使用，Redux的作者封装了一个React专用的库React-Redux，讲解之前，先来了解一下什么是容器组件和傻瓜组件？ React-Redux把组件分为容器组件和傻瓜组件（UI组件）。一、容器组件容器组件，负责和Redux Store打交道的组件，处于外层。功能：和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变；...

要想知道Flux是什么，我们先从MVC框架说起。在MVC（Model-View-Controller）的世界里，React相当于V（也就是View）部分，只涉及页面的渲染一旦涉及应用的数据管理部分，还是交给Model和Controller，不过，Flux并不是一个MVC框架，事实上，Flux认为MVC框架存在很大问题，它推翻了MVC框架，并用一个新的思维来管理数据流转。一、MVC框架的缺陷MVC框...

React严格定义了组件的生命周期，分为如下三个过程：装载过程（Mounting）：也就是组件第一次在DOM树中渲染的过程；更新过程（Updating）：当组件重新渲染的过程；卸载过程（Unmounting）：组件从DOM中删除的过程。一、装载过程：我们先来看装载过程，当组件第一次被渲染的时候，依次调用的函数是如下这些：constructorgetInitialStategetDefaultPro...

React是一个JavaScript语言的工具库，在这个JavaScript工具铺天盖地的时代，没有意外，首先需要安装Node.js和npm，React本身并不依赖Node.js，但是我们开发中用到的诸多工具需要Node.js的支持。在Node.js的官网（https://nodejs.org/）可以找到合适的安装方式，安装Node.js的同时也就安装了npm，npm是Node.js的...

众所周知的，Javascript是一种单线程的语言，所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是，一些将来的、未知的操作，必须异步实现（关于异步，我会在另一篇文章里进行讨论）。本文将讨论一个比较常见的异步解决方案——Promise，时至本文最后更新的日子，Promise的应用已经极其广泛。Promise解决的问题我相信每个前端都遇到过这样一个问题，当一个异步任务的执行需要...

本次的代码都放在 github.com/sunyongjian… ， 可以 done 下来加深理解。父子组件父→子parent组件传给child组件，符合react的单向数据流理念，自上到下传递props。// 父组件class Parent extends Component { constructor() { super(); this.state = { v...

1、问题描述 不知道大家在使用map循环中有没有遇到这种问题，在带有编辑输入框的循环中，输入值后，若想在点击“换一批”按钮实现循环数据的更新时，会发现，上一次输入的值依然会出现在循环当中的固定位置，尽管循环已经再次执行。这时就需要我们在点击按钮实现换一批的同时就清空Input输入框的内容。2、解决思路首先在状态机中设置一个inputValue数组，用于接收map中每项输入的