xiaohesong

对于rails中集成react组件有两个比较好的gem可供选择。1. react_rails这个gem相对简单一点,有一个很好的例子可供参考。reactjs-a-guide-for-rails-developers2. react_on_rails这个gem复杂些，对环境要求比较高。环境要求nodejsyarnforeman – gem install foremanrecet_on_r

本文太长，谨慎阅读。本文原文：一份完整的useEffect指南原文档: A Complete Guide to useEffect你使用hooks写了一些组件。也许只是一个小的应用。你基本上是满意的。你对这个API游刃有余，并在此过程中学会了一些技巧。你甚至做了一些自定义Hook来提取重复逻辑（300行代码消失了！）并向你的同事展示了它。他们会说，“干得好”。但是有时候当你使用useE...

原文: How Are Function Components Different from Classes?原译文: 函数组件与类有什么不同?函数组件与类有什么不同?React函数组件与React类组件有何不同？有一段时间，规范的答案是: 类可以访问更多功能（如状态）。有了Hooks，就不再是这样了。也许你听说其中一个在性能上会更好。那么是哪一个? 许多这样的benchmarks是...

Making setInterval Declarative with React Hooks原文： Making setInterval Declarative with React Hooks原译文：让setInterval在React-Hooks中为声明式如果你玩React Hooks有一些时间，你可能会遇到一个有趣的问题：使用setInterval并不会按照你的预期工作。用Ry...

原译文：React作为ui运行原文： React as a UI RuntimeReact as a UI Runtime大多数的教程介绍React是作为一个ui库。这个是说的通的，因为React是一个UI库。这就是标语所说的！我之前写过关于创建用户界面的挑战。但是这篇文章以不同的方式谈论react — 更像是程序运行时。这篇文章不会教你任何创建用户界面的东西。 但它可能会帮助你更...

本节是 stack reconciler程序的实现说明的集合。本文有一定的技术含量，要对React公共API以及它如何分为核心，渲染器和协调(和解，reconciler)程序有很深的理解。如果你对React代码库不是很熟悉，请首先阅读代码库概述。它还假设你了解React组件的实例和元素之间的差异。stack reconciler用于15版本和早期. 它的代码在 src/renderers...

原文： 从源码看浅比较之前看react-redux的源码，记录了一些东西，然后前两天闲着没事看了下浅比较（之前知道浅比较，但是没有看源码，和自己想象中的浅比较基本就是那么一回事）。看react-redux源码的记录在clone下来的代码库里。如果你也在看或准备看源码，希望会对你有所帮助吧。下面是浅比较部分的代码解析：const hasOwn = Object.prototype.hasO...

原文: how-does-react-tell-a-class-from-a-function译文原文: react是如何知道组件是不是类组件考虑这个定义为函数的Greeting组件：function Greeting() { return <p>Hello</p>;}react同样支持作为一个类去定义它:class Greeting extends Re...

在之前的的hook 介绍里有一段代码:import { useState } from 'react';function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div...

之前我们介绍了使用hooks的原因，在开始介绍api之前，现在我们先来整体的预览下这些api。从上篇的介绍可以知道，Hook是向后兼容的，有react开发经验的你看起来会更顺畅。是一个快节奏的概述。如果你感到困惑，可以看下上面提到的介绍里的动机：详细说明 阅读动机以了解我们为何将Hooks引入React。State Hook看下面的例子，他是一个计数器import { useSta...

Hooks是新的功能提案，出现在v16.7.0-alpha版本中，使用Hooks可以让你在不使用类的情况下使用状态和其他的一些react功能。可在此讨论看下面代码：import { useState } from 'react';function Example() { // Declare a new state variable, which we'll call "count"...

React Components, Elements, and InstancesElements Describe the Tree在react中，元素(element)就是描述组件实例或DOM节点及其所需属性的普通对象。 它仅包含有关组件类型（例如，Button组件），其属性（例如，颜色）以及其中的任何子元素的信息。并且元素也不是实际的组件实例。相反，它是一种告诉React你想在屏幕上...

前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个 父组件直接调用子组件方法, 也类似. 先看代码,比较直观.import React, {Component} from 'react';export default class Parent extends Component { render() { return(...

这节主要说的是自定义webpack之关于配置按需加载遇到的问题 - AsyncComponent.jsimport React, {Component} from "react";export default function asyncComponent(importComponent) { class AsyncComponent extends Component { const

thunk-saga背景: 刚开始学习前端以及react.之前粗略的对比了下thunk以及saga.发现thunk与saga总体差不多,对我来说都够用,再考虑到学习成本,我还是选择使用了thunk. 但是使用thunk重构几个模块之后发现登录流程很麻烦,需要promise或者async/wait的支持才可以很好的完成登录流程,我的解决办法是在回调里调用(尝试过async/promis不可以,里面的步

博客竟然不能写MarkDown文章了.又Bug了吧.直接贴链接吧原文链接

React-redux 7.1发版啦。因为在新的项目中用到了hooks，但是用的时候react-redux还处于alpha.x版本的状态。用不了最新的API，感觉不是很美妙。好在，这两天发布了7.1版本。现在来看看怎么用这个新的API。useSelector()const result : any = useSelector(selector : Function, equalityFn?...