数据流

sorrycc blog issues 1 dva的设计思想...

阅读

React Error Boundaries

新版的React已经存在 Error Boundaries 错误边界的模式。。 https://zh-hans.reactjs.org/docs/error-boundaries.html 在我们开发组件的时候一个组件的error...

阅读

react-router源码解析

https://github.com/ReactTraining/react-router/issues/6060#issuecomment-424575126...

阅读

阅读 React性能优化-虚拟Dom原理浅析

在虚拟dom的比较,除了一些根据优化算法进行的优化外,还需要切记,避免传递的引用。 JSX的背后 ...

阅读

redux link

https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34623840#34623840...

阅读

react cookbook note

无状态函数 JSX扩展属性 解构参数 条件渲染 子元素类型 数组做为子元素 函数作为子元素 渲染回调 子元素传递 代理组件 样式组件 事件转换 布局组件 容器组件 高阶组件 状态提升 可控的input 无状态函数 ` //...

阅读

避免rerender 的一些方法

此篇主要是使用context api一些避免无谓re-render的场景 demo 汇总 详细描述 因为provide创建的时候 比对Children 每一次创建的provide的Children 必然不相等。 ...

阅读

some react patterns

react 灵活 带来的模式也很多。 本篇主要是描述两种模式 compound component render props 从例子了解痛点。 demo1.js simple case 可以看到一个组件内部自行使用子组件。 ...

阅读

展示和容器组件Presentational and Container Components

文章地址 这里有一些简单的模式,当我写react应用的时候经常用到,如果你一直在走react,你也许早已经发现过它,这篇文章解释得很好,但我想补充几点。 如果将它们分为两类,你会发现你的组件更容易重用和合理,我称他们为容器组件,演示组件 ...

阅读

Suspense

https://github.com/lihongxun945/myblog/issues/38...

阅读

React 使用动画几个库的比对demo

https://codesandbox.io/s/7271knp34j 参考文章有些demo失效,这边再做一下调整 more: ...

阅读

当setstate调用时组件已被卸载或者还未被didmount

当还没被挂载或者已经被卸载的组件调用setState会得到一个警告 例子: https://codesandbox.io/s/jvroxlzjp5 而这种情况。我们可以用一个状态量来将其设置是否允许setState 例子: ...

阅读

cloneElement的小用法

用于像多子组件注入 demo示例 https://codesandbox.io/s/yjr0x9yoz9 显然我们可以通过硬编码完成一些组件开发 ` function App() { return ( ); } ...

阅读

pic save

...

阅读

ref

render方法后,组件是不会返回实例供我们操作使用的。 Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。 它组件被调用会新建一个实例,而refs就会指向这个实例 简单的input ref获取值例子...

阅读

React Hook

React Hook React Hook是一个16.8版本出现的。这个概念出现很久了。 今天来试试React hook 我觉得最重要的几点 如何使用。 解决什么痛点。 如何在原有模式下使用。 未来 一个简单的例子 simple...

阅读

React生命周期

react生命周期 16.3以前版本 react lifecycle componentWillMount 组件即将被渲染到页面上 componentDidMount ...

阅读

Learn Resource

文档类 react 英文文档 react 中文翻译文档 redux 英文文档 redux 中文文档 react-router 英文文档 建议看英文 react-router 中文文档 babel 英文文档 babel 中文文档...

阅读

small function

React.cloneElement clone一个组件 ` React.cloneElement( element, [props], [...children] ) props 会进行一层浅复制, 甚至会进行ref的保留 ...

阅读

使用注意点

了解使用pureComponent 当父级节点更细的时候,子节点也会对应更新渲染,即使此时的state不需要进行render pureComponent 帮我们对state props 做一层浅比较。减少不必要的render操作...

阅读

bind this

我们经常使用React可以发现组件内部方法调用this时候 一般都不会是组件实例 我们可以发现this可用一般在componentDidMount与render内可用 别的组件方法常常不可用this 这与js的机制有关系 ...

阅读

simpleCreateStore

` const createStore = (reducer) > { let state; let listeners = []; const getState = () => state; const dispatch...

阅读

受控组件与非受控组件

受控组件(Controlled Component) 非受控组件(Uncontrolled Component) 受控组件(Controlled Component) 什么叫受控组件呢? web开发有一点常用的就是表单,...

阅读

高阶组件

来源 深入理解 React 高阶组件 React Higher Order Components in depth reconciliation React系列之高阶组件HOC实际应用指南 React高阶组件(HOC)模型理论与实践...

阅读

需要在意的小细节

唯一key是不会传递给组件的,也就是说props.key是没有的,key只是给react的一个提示...

阅读

条件渲染

可以花括号内使用&& 也可以花括号使用三目运算符 也可以在组件内部判断,然后自行返回null亦或者是组件...

阅读

Props与state

Props 可以视为外部传入状态 state 可以视为组件内部状态 state 存储组件的状态,就是一些data。 组件可以通过一些state来做渲染组件 通过this.state获取。 ...

阅读

事件的监听

事件绑定只能绑定在HTML标签上,不能绑定在组件标签上 事件绑定需要是用驼峰式 React内部已经对事件绑定的event做了兼容 事件通过函数调用。所以调用的时候this有可能会丢失。在组件实例绑定的时候onClick =...

阅读

JSX

在React使用JSX编写dom 约定大小写来区分html原生标签与React组件 ` import React,{Component} from 'react' class TestTemp extends Component{ ...

阅读

声明式与命令式编程

声明 声明我要的是什么。 命令 我要这个我要干什么 `js var arrays = [1,2,3,4] want to be [2,4,6,8] let len = arrays.length for (let i...

阅读