逆风飞翔的代码狗

redux优化todolist1.在src目录下新建store/index.js和store/reducer.jsreducer.js:把App.js里面的值提取到reducer.js里面来let defaultState = { title:"待办事项", value:'', btnText:'ADD', arr:[ { "id": 1594449605029, "title": "this", "isCompleted": false

msVue 和 react 的区别：同：它们都用到Virtual DOM，是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。原文链接：http://caibaojian.com/vue-vs-react.html1.渲染的时候不同：Vue宣称可以更快地计算出Vir

reactindex.js:import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as Api from './untils'React.Component.prototype.$http = ApiReactDOM.render( <App />, document.getElementByI

路由随着url地址栏的变化变化1.可以通过挂载store后，用this.props.history.location.pathname来监听地址栏的变化。2.可以通过将url地址栏存到localstorage，用时再取出来PS：ant design ： defaultSelectedKeys={[getPath('path')]} // 默认路由高亮selectedKeys={[this.props.history.location.pathname]} // 决定路由哪一个高亮...

redux（store）与router之间的冲突在使用store 的时候，App.js 就失去了router的功能，当然严格意义上不是失去了这个功能，而是应该从store来给它传递这个功能罢了，另外有一个办法，可以从withRouter想办法，withRouter就是给传递多层导致失去了this对象，让其重新具有路由功能的：App.js:import React, { Component } from 'react'import { connect } from 'react-redux'imp

父传子，子传父，跨组件传值父传子：App.js:import React, { Component } from 'react'import Com1 from './components/com1'import Com2 from './components/com2'export default class App extends Component { constructor(){ super() this.state = { count:1 }

vue是react的简化，但是基本性能上是差不多的同样的一份代码，一个功能，可能vue十行代码能够实现，但是用react需要三十行，但是丝毫不影响喜欢的人对它的热爱，由于react可能偏原生一些，但是也正是因为它偏原生，所以它的写法很多种，最终都可以实现你想要的目标。今天说的是react的组件之间的传值，我们知道vue的传值分为父传子、子传父以及兄弟组件之间的传值，父传子： 父组件把数据绑到属性上面，子组件通过props来接收父组件传递过来的属性值，拿到相应的数据子传父： 父组件通过定义一个方法，通

重定向about.js:import React, { Component } from 'react'import about1 from './about1.js'import about2 from './about2.js'import { Link,Route } from 'react-router-dom'export default class index extends Component { componentDidMount(){ // console.log(

路由传递参数我们知道前端想后台传递参数有两种方式：一种是直接将参数放在地址栏里面传递，这里又有两种方式：/home?name=fly&age=18和/home/fly/18另外一种方式是将参数放在body里面传递这里针对第一种的两个传递方式：App.jsexport default class App extends Component { render() { return ( <Router> <Link t

模糊与精确匹配模糊匹配在前面的基础之上，将App.js稍微修改：App.jsexport default class App extends Component { render() { return ( <Router> <Link to="/home/a">Home</Link>--- <Link to="/about">About</Link> <br /

react-router 编程式导航还记得vue里面的路由是怎么写的吗？在vue里面，路由需要：引入->实例化路由对象 ->定义规则->挂载到全局->路由占坑（在页面中使用）vue里面路由导航也有两种方式：router-link 是配合router-view使用在页面当中的另一种是在函数被触发的时候执行this.$router.push(路由路径)后一种也被称为编程式导航而在react里面也有两种上述的导航是第一种，直接在页面中配合route使用的Link 与to

react-router路由路由的使用嵌套路由模糊匹配精确匹配路由重定向npx create-react-app lx-router （npm i create-react-app -S / create-react-app lx-router）home/index.js:import React, { Component } from 'react'export default class index extends Component { render() { re

使用react-redux数据渲染和方法提取在项目的src目录下创建store，基本结构如：数据渲染需要更改的有根目录下的index.js、/store/state.js、/store/reducer.js、App.jsindex.js:import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as Api from '.

todolist–删除todo和改变todo的选中状态拿到点击删除按钮的那一个todo的主键Id，通过api里面定义的删除请求：这里有一个特别重要的点，就是怎么样去拿到id在父组件传递给子组件的同时会把id也传递过去，那么我们只需要在子组件通过props接收就可以了，在父组件传递过去的时候需要将信息通过{…}展开App.jsimport React, { Component } from 'react'import TodoHeader from './components/header/toh

todoinput 添加代办事项：首先我们想好基本流程：用户输入信息，我们需要通过输入框拿到数据—>点击按钮触发添加事件—>操作mock/todo.json：首先我们来试一下json-server创建的端口是否可用:前八个是自己瞎写的，最后一个是实现了添加功能之后插入的PS：这里的id是主键，为了遵循主键的不重复性，我们想到用获取时间，因为70.1.1是计算机诞生日，所以那一天为计算机的公元纪年，今后的每一秒都是从那时候算起的，所以不可能重复我们要拿到输入框的数据App.j

json-server1.npm i json-server -S2.在项目目录下常见一个mock/todo.json:在里面书写json数据即可：{ "todos": [ { "id": 1, "title": "吃饭", "isCompleted": false }, { "id": 2, "title": "约会", "isCompleted": false }, {

react–todolist最终要实现的页面如图所示：上图中我们需要实现的有页面渲染、点击按钮添加、删除、改变每条数据前面的input框的选中效果1.首先我们用react-cli搭建项目ps：需要安装的依赖：将todolist划分为三个模块：todoHeader、todoInput 、todoList，将三个模块引入到文件App.js，再将App引入到项目主入口index.js，挂载到页面中去：在App.js中定义好数据，其中arr是输入框下面用来展示的数据，暂时写死了PS：数据暂

redux的模块化上一步我们已经对state、actions进行了处理，进一步对代码进行优化： handleClick(){ const action={ type:'add_count', value:1 } store.dispatch(action) }首先是这一块，我们可以在store下面建立一个actionCreators.js,将action提取到一个文件里面去：actionCreators.js// 定义所有的请求//

接着上个页面实现按钮点击在上个页面加入按钮，实现点击按钮，实现App组件内的数据更新import React, { Component } from 'react'import store from './store'import Com1 from './components/com1'export default class App extends Component { constructor(){ super() // 获取store里面的值，更新页面里面的count.

redux的初步实现 react与vue一样，都存在父传子、子传父、兄弟组件之间的传值，单纯的页面 之间传值的实现方式需要掌握是肯定的，比如 父传子： 由父组件在调用子组件的时候将要传递的值通过属性绑定的方式，再由子组件 通过props接收，可以回溯到react的state里面去（vue回溯到data里面去），再在 相应的地方进行渲染。 子传父： 由父组件定义函数，将函数传递给子组件触发，子组件在触发的同时将自己的 数据作为参数传递（执行的是父组件的

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar