随笔分类 - React
摘要：之前学习了react，也学习了redux，那么react-redux是什么呢？实际上他是一个第三方的模块，他可以帮助我们在react之中更加方便的使用redux。首先如果想用react-redux，先要安装react-redux. import React from 'react'; import
阅读全文
摘要：redux-thunk这个中间件可以使我们把这样的异步请求或者说复杂的逻辑可以放到action里面去处理，redux-thunk使redux的一个中间件，为什么叫做中间件 我们说中间件，那么肯定是谁和谁的中间，那么redux的中间件指的是谁和谁的中间呢？ 如图。view在redux中会派发一个act
阅读全文
摘要：如果我们想使用redux，第一步需要通过 yarn add redux 来安装redux 安装成功后就需要去创建一个store，怎么创建呢，非常的简单，在src下面创建一个文件夹，这个文件夹名字就叫做store，里面有个index.js，reducer.js index.js import { cr
阅读全文
摘要：如图，这个redux工作流程的一个图例，咋一看特别复杂，是不是特别难，其它他非常的简单，之前了解过，redux就是一个数据层的框架，他把所有的数据都放在了store之中，大家可以看到，这张图里面放着一个store，里面放着所有的数据，然后还讲了每个组件都要去store里面拿数据。然后每个组件也可以去
阅读全文
摘要：react可以写出一些比较简单的一些项目，但是只能写出很简单的一些项目，原因是什么呢，原因是react是一个非常轻量级的是视图层框架，打开官网可以看到大大的一行字，A JavaScript library for building user interfaces，一个js库，干什么用的呢，创建UI接
阅读全文
摘要：css动画的方式，比较局限，涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块，借住这个模块可以更方便的实现更加复杂的动画效果 https://github.com/reactjs/react-transition-group https://r
阅读全文
摘要：index.js import React, { Component, Fragment } from 'react'; class App extends Component { constructor(props){ super(props); this.state = { show: true
阅读全文
摘要：react提升代码性能的点 1、绑定如果改变作用域点话放在constructor里面做，这样可以保证整个程序的作用域绑定操作只会执行一次，而且避免子组件的无谓渲染。 2、内置的setState是个异步操作，多次数据的改变变成一次，这样可以降低虚拟dom的比对频率 3、底层用虚拟dom，同层比对，ke
阅读全文
摘要：首先什么叫做生命周期函数，生命周期函数指的是在某一个时刻组件会自动调用执行的函数。比如之前的render函数，当state和props发生改变的时候，render函数会被重新执行，那么他是自动的被组件调用执行的。所以render函数实际上就是一个生命周期函数。 再看constructor()算不算一
阅读全文
摘要：1、state 数据 2、jsx模板 3、生成虚拟dom（虚拟DOM就是一个js对象，用它来描述真实DOM） ['div', {id:'abc'}, ['span', {}, 'hello world']] 通过这样的一个js对象，我们就可以表述上面的dom结构了 4、用虚拟dom的结构，生成真实的
阅读全文
摘要：当组件当state和props发生变化当时候，组件当render函数就会重新执行，组件就会被重新渲染，react中实现这种重新渲染，他的性能是非常高的，因为他引入了一个虚拟Dom的概念，那么什么是虚拟的Dom，为什么虚拟Dom带来了变革性当改变 当state发生变化,render函数会重新执行，重新
阅读全文
摘要：我们很明显的能够感受到，react是一门数据驱动的框架，当数据发生变化，页面就会自动发生变化，他背后的原理是怎么样子的呢 比如todolist例子里面，inputValue变了，框里面的内容就会自动变。同时input框里面见监听了onChange事件，input框里面的内容变了,inputValue
阅读全文
摘要：每个组件都有自己的props参数，这参数是从父组件接收的一些属性，那么如何对参数的类型作校验。如何定义参数的默认值。这里涉及到两个基础的概念，叫做proptypes 和 defaultprops。子组件要接收的类型是固定，父组件不能乱传。比如显示的是个字符串，父组件就不能传个函数过来，不然代码是有问
阅读全文
摘要：优势一、声明式开发 首先react是声明式的开发方式，这个与之对应的是命令式开发方式，之前在用jquery写代码的时候，都是直接来操作dom，直接操作dom的这种编程方式，我们把他叫做命令式的编程，也就是我要创建一个页面，我要一点点的告诉dom,你要怎么去挂在，你要怎么去做，这种编程方式我们叫做命令
阅读全文
摘要：这两个点是react入门非常重要的两个点，以前我们是直接操作dom的形式去做，react的设计思想和以前直接操作dom是完全不同的，react是一个响应式的框架，他在做编程的时候，强调的是我们不要直接操作dom。我们操作的是数据，通过数据的变化，react会自动感知到数据的变化，自动的帮你去生成do
阅读全文
摘要：import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="App"> hello world </div> ); } } export def
阅读全文
摘要：组件就是页面上的一部分。如图，左边是一个网页。右边是对应的一个组件图。我们可以把一个大的网页拆分成很多小的部分。比如标题部分，对应一个组件，就是标题组件。搜索部分，对应的组件就是搜索组件。而这个搜索组件我们可以进一步的拆分，是由input框和button组成的。所以还可以继续把搜索组件拆分成小的组件
阅读全文
摘要：首先我们可以看到底部一个 yarn.lock的文件，这个文件主要是项目依赖的安装包，他的一些版本号，会在这里做一些限制，这个文件不要动就好了。 readme.md，这个文件其实是项目的说明文件，他里面会有一些关于项目的说明，我们可以全部删除掉，自己用markdown的语言做一些相关的介绍 packa
阅读全文
摘要：使用reactjs，我们有两种方式 一种是通过script标签引入reactjs，这是一种比较古老的编码方式了， 如果我们的项目比较大，你会对项目js进行拆分，然后页面就会通过script标签加载很多拆出来的js文件。这样的话，页面性能会很低，维护性也比较差 第二种是使用脚手架工具，这也是我们在学习
阅读全文
摘要：React JS：可以用react的语法，来编写网页的交互效果 React Native：可以让我们借用react的语法来编写原生的app应用 React VR：在react的基础上去开发VR，或者说是全景应用 React JS 是 Facebook在2013年5月推出的一款前端框架，他带来一种全新
阅读全文