摘要: 一、简述 redux的工程化管理 1.reducer的模块化划分:每一个板块有一个自己对应的reducer,最后基于一些方法把所以的reducer合并即可; 2.基于actionCreator统一管理每次派发需要的行为对象,而且和reducer一样,也是分板块管理的; 3.把dispatch和red 阅读全文
posted @ 2020-01-19 18:07 柴小智 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 直接看代码 mydux.js文件 function createStore(reducer) { /** * 1.注册用到的方法,并return出去提供使用 * 2.定义默认的状态与事件池 * 3.默认先触发一次dispatch给state赋予默认值 * 4.componentDidMount后会通 阅读全文
posted @ 2020-01-19 18:02 柴小智 阅读(233) 评论(0) 推荐(0) 编辑
摘要: 一、执行流程 全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》redux就是这种解决方案:redux只有一个作用,就是为了实现组件之间的信息交互。 1.执行createSto 阅读全文
posted @ 2020-01-19 17:57 柴小智 阅读(1139) 评论(0) 推荐(0) 编辑
摘要: 一、状态提升 使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。 原理:父组件基于属性把自己的一个fn函数传递给子组件,子组件在某些操作下把fn执行,在执行fn的过程中把父组件中的一些属性信息进行了修改,从而影响相关 阅读全文
posted @ 2020-01-14 16:44 柴小智 阅读(284) 评论(0) 推荐(0) 编辑
摘要: 直接上代码 App.js文件 let list = [ { id: 1, img: require('./static/image/one.jpg') }, { id: 2, img: require('./static/image/two.jpg') }, { id: 3, img: requir 阅读全文
posted @ 2020-01-14 11:25 柴小智 阅读(314) 评论(0) 推荐(0) 编辑
摘要: 一、事件处理 React事件绑定属性的命名采用驼峰式写法,而不是小写。 直接看代码 两种方式绑定事件并传参数 第一种: constructor(props) { super(props); //在dom上用bind函数绑定了this,这里可以省略 this.handleClick = this.ha 阅读全文
posted @ 2020-01-14 11:08 柴小智 阅读(375) 评论(0) 推荐(0) 编辑
摘要: 生命周期 生命周期图例: 组件生命周期相关:(九个生命周期接口) 最初始: getDefaultProps getInitialState Mounting/组件挂载相关: componentWillMountcomponentDidMount Updating/组件更新相关: componentW 阅读全文
posted @ 2020-01-13 09:09 柴小智 阅读(251) 评论(0) 推荐(0) 编辑
摘要: 一、状态 自己在组件内部定义的 作用:组件内部的状态重新更新时,可以控制组件内部重新渲染(不需要重新调取组件也可以重新渲染) import React from 'react'; class Clock extends React.Component{ constructor(){ super(); 阅读全文
posted @ 2020-01-13 08:34 柴小智 阅读(344) 评论(0) 推荐(0) 编辑
摘要: 一、创建组件 1.函数式创建 特点: 组件不能访问this对象 组件无法访问生命周期的方法 无状态组件只能访问输入的props,无副作用 function Title() { return <h2>新闻列表</h2>; } 2.继承component类来创建组件 (一般我们用继承React.Comp 阅读全文
posted @ 2020-01-08 15:37 柴小智 阅读(421) 评论(0) 推荐(0) 编辑
摘要: 一.原理 JSX的渲染原理主要分为三部分: 1.基于babel-preset-react-app这个语法解析包,把jsx语法转换成一个名为 React.createElement() 的方法调用。 const element = ( <h1 className="greeting"> Hello, 阅读全文
posted @ 2020-01-07 15:10 柴小智 阅读(1651) 评论(0) 推荐(0) 编辑