React
安迪源文
小步快走
展开
-
React 参考文档(基于v16.2.0) 01 : 顶层API
React 顶层API (Top-Level API)React 是整个React库的入口点,你可以将它想象成最顶层的命名空间。当使用<script>标签加载React时,这些顶层API就会在React命名空间下可用了。如果你在基于npm使用ES6,可以这么引入React顶层API :import React from 'react'如果你在基于npm使用ES5,就要这么引...翻译 2018-02-26 11:14:13 · 464 阅读 · 0 评论 -
React Navigation源代码阅读 : views/ScenesReducer.js
import invariant from '../utils/invariant';import shallowEqual from '../utils/shallowEqual';const SCENE_KEY_PREFIX = 'scene_';/** * Helper function to compare route keys (e.g. "9", "11"). * 工具助...原创 2018-05-27 10:30:30 · 356 阅读 · 0 评论 -
React Navigation源代码阅读 :views/Header/Header.js
import React from 'react';import {Animated, Image, Platform, StyleSheet, View,} from 'react-native';import {MaskedViewIOS} from '../../PlatformHelpers';import SafeAreaView from 'react-native-safe-...原创 2018-05-16 11:55:37 · 830 阅读 · 0 评论 -
React Navigation源代码阅读 :views/TouchableItem.js
/** * * 封装一个 touchable 组件,在 iOS 和 Android 都使用原生的效果 。 * * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装: * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ? * 1.1 Android 平台并且平台版本&gt...原创 2018-05-28 12:18:00 · 430 阅读 · 0 评论 -
React Navigation源代码阅读 : views/Transitioner.js
import React from 'react';import {Animated, Easing, StyleSheet, View} from 'react-native';import invariant from '../utils/invariant';import NavigationScenesReducer from './ScenesReducer';import C...原创 2018-05-28 18:31:22 · 648 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStackStyleInterpolator.js
import {I18nManager} from 'react-native';import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';/** * 工具类:构建 card stack 中 card 的样式,在屏幕切换时使用的插...原创 2018-05-29 11:33:30 · 1101 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/TransitionConfigs.js
import {Animated, Easing, Platform} from 'react-native';import CardStackStyleInterpolator from './CardStackStyleInterpolator';import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';...原创 2018-05-20 11:22:21 · 639 阅读 · 0 评论 -
React Navigation源代码阅读 : views/TabView/TabView.js
import React from 'react';import {View, StyleSheet, Platform} from 'react-native';import {TabViewAnimated, TabViewPagerPan} from 'react-native-tab-view';import SafeAreaView from 'react-native-safe-...原创 2018-06-05 14:24:27 · 678 阅读 · 0 评论 -
React Navigation源代码阅读 :views/CardStack/Card.js
import React from 'react';import { Animated, StyleSheet } from 'react-native';import createPointerEventsContainer from './PointerEventsContainer';/** * 定义一个React Component Card,这个组件会被 CardStack(卡...原创 2018-05-10 10:51:20 · 348 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStack.js
import React from 'react';import clamp from 'clamp';import {Animated, Easing, I18nManager, PanResponder, Platform, StyleSheet, View,} from 'react-native';import Card from './Card';import Header ...原创 2018-05-30 16:55:06 · 692 阅读 · 0 评论 -
Spring MVC DispatcherServlet 策略初始化 -- initThemeResolver
本文所用源代码基于 Spring Web MVC 5.1.4.RELEASE概述DispatcherServlet#initThemeResolver方法用于准备DispatcherServlet处理请求时所使用的ThemeResolver策略组件对象。#initThemeResolver首先尝试从容器(及其祖先容器)获取名称为themeResolver的bean组件对象,记录到Disp...原创 2019-02-19 16:23:25 · 573 阅读 · 0 评论 -
React应用的五类状态
我不知道你是怎样,总之当我开始写React程序的时候,我纠结了很久我的状态怎么处理。不管我怎么组织setState调用,总是觉得事情有点不对。 也许这正是为什么我遇到Redux后倍感兴奋的原因。Redux为我提供了一个唯一的地方存储我的状态。理论上听起来很棒。 但随后我就意识到,把它们放到一起并没有真正让它们变得容易使用。 接下来我发现,我需要多个地方而不是一个地方来保存我的状态...翻译 2018-04-29 00:43:13 · 774 阅读 · 0 评论 -
高阶组件(Higher-Order Components)
高阶组件(Higher-Order Components)高阶组件(HOC)是React中组件重用的一种高级技术。HOC本身并不是React API的一部分。它是从React可组合性质中冒出来的一种模式。具体地讲,一个高阶组件是一个函数,它输入一个组件,然后返回一个新的组件。const EnhancedComponent = higherOrderComponent(Wrapped...翻译 2018-05-17 18:51:59 · 3743 阅读 · 1 评论 -
React Native 应用中使用 Redux 管理状态
简介本文假设你已经有一个可以运行的 React Native 应用,在此前提下介绍如何引入 Redux 管理状态。本文所使用的例子功能如下 : 1. 使用 Redux store 管理状态数据:一个用户名和一个计数器; 1. store对用户名可以有两种原子操作 : 设置为某个值,或者 清除用户名; 2. store对计数器可以有两种原子操作: 增加1,或者 减少1 ; ...原创 2018-04-25 16:54:32 · 2847 阅读 · 0 评论 -
React 参考文档(基于v16.2.0) 02 : React.Component
React.Component组件(Component)让你可以把UI分成独立可重用的片段,可以独立思考(译注:它们的关注点是分离的)。React.Component由Recat库顶层API提供。概述React.Component是一个抽象基类,直接使用该类几乎没有什么意义。一般情况下,你需要继承该类构造自己的组件。继承该类实现自己的组件时,至少需要定义自己的 render() 方...翻译 2018-02-26 18:16:49 · 575 阅读 · 0 评论 -
React 组件的生命周期总结
React组件的生命周期总结表一个React组件在它的一个生命周期内一共经历如下阶段 : 所属阶段 周期内该阶段被执行顺序 周期内该阶段被执行次数 介绍 初始化阶段 1 1 当一个组件要被挂载到DOM上时,会首先经历初始化阶段 挂载阶段 2 1 紧跟在初始化阶段之后 更新阶段 n N 组件挂载后可能会被反复...原创 2018-02-27 11:03:46 · 372 阅读 · 0 评论 -
React 组件Component,元素Element和实例Instance的区别
英文原文 : React Components, Elements, and Instances组件(Components)和组件实例(their Instances),还有元素(elements)这几个概念困扰了很多React初学者。为什么同是需要渲染到屏幕上的东西却需要三个不同的概念呢 ?管理实例 Manage the Instances如果你是一个React新手,很可能之前你...翻译 2018-02-28 11:31:49 · 6139 阅读 · 0 评论 -
React 备忘录 v16
英文原版模块 reactrender// 重新绘制组件的元素树render() { return <div />;// 返回一棵组件树,也可是一个Fragment,或者一个数组}constructor// 1. 对父组件设置给自己的属性,通过该方法的参数props来接收// 2. 该方法内如果要调用super(...),它必须是该方法体...翻译 2018-03-02 18:39:44 · 410 阅读 · 0 评论 -
React Navigation 基础 1 : 开始使用
开始使用React Navigation的诞生,源自React Native社区对这样一个页面导航解决方案的需求 :扩展性强易用完全使用JavaScript编写(这样的话你就有机会阅读和理解所有的源代码),建立在强大的平台原生原语(native primitives)基础之上在你决定开始在你的项目中使用React Navigation之前,你可能需要读一下这篇文章anti-p...翻译 2018-03-14 09:28:07 · 722 阅读 · 0 评论 -
React Navigation 基础 2 : Hello React Navigation
Hello React Navigation在浏览器中,链接到其他页面你可以使用HTML锚点标签(anchor tag)&amp;amp;lt;a&amp;amp;gt;。当用户点击一个链接时,当前页面的URL被压到浏览器历史记录栈中。当用户点击了回退按钮,浏览器会从浏览历史记录栈的栈顶弹出一项,然后当前活跃页面现在又变成了之前刚刚访问过的那个页面。React Native没有像浏览器这样一个全局的访问历史记录栈机制,正因此...翻译 2018-03-14 09:28:55 · 1224 阅读 · 1 评论 -
React Navigation 基础 7 : 全屏模态
Dictionary.com对于“模态”没有给出一个令人满意的定义,不过语义UI是这么描述“模态”的: A modal displays content that temporarily blocks interactions with the main view。 “模态”显示内容的同时临时阻止用户和主视图的交互。听起来这是对的。模态就像一个弹出框–它不是主导航流程的一部分—...翻译 2018-03-24 18:34:57 · 1882 阅读 · 0 评论 -
React Navigation 基础 8 : 术语词汇表
Header – 头部也叫做导航头部,导航条,navbar,或许还有其他什么叫法。特指导航栈内某个屏幕最上方的一块矩形区域,包含了返回按钮和屏幕标题(可能还有一些其他东西,比如标题右方可能还会有文字图片按钮等)。这整个矩形区域在React Navigation中被叫做”header”(头部)。Screen component – 屏幕组件一个屏幕组件指的是我们的路由配置中所使用的组件:...翻译 2018-03-24 19:05:20 · 560 阅读 · 0 评论 -
React Navigation API 参考手册 2:StackNavigator 栈式导航
提供一种将新屏放在栈顶的屏幕切换方式。 译注 : 本文中屏幕切换,变换,过渡指的都是一个意思,对应英文 screen transition 。缺省情况下,苹果和安卓上,StackNavigator被配置得有类似的外观和感觉:苹果iOS系统上新屏幕从右侧滑出,安卓平台上新屏幕从底部淡出。苹果iOS平台上StackNavigator也可以被配置成模态样式,屏幕从底部滑出。API定义...翻译 2018-03-27 23:09:07 · 922 阅读 · 0 评论 -
React高级指南--引用Refs和DOM
引用Refs提供了一个访问render()方法DOM节点或者React元素的方法。典型的React数据流中,props是双亲组件和子组件交互的唯一手段。要修改一个子组件,你需要使用新的props重新渲染它。然而,确实存在少数一些情况你需要命令性地(imperatively)修改一个子节点而不是通过典型的props数据流方式。被修改的子节点可能是一个React组件实例,亦或是一个DOM元素。对于...翻译 2018-04-24 11:13:02 · 3759 阅读 · 0 评论 -
Springboot + WebJars + React : HelloWorld 项目
作为Java程序员,某些情况下,我们需要React和ES6严谨并且快速地表达一些原型思想。这种情况下,全套的类似npm+webpack这种工具栈略显厚重,完全使用原生Javascript或者jQuery表达逻辑又显得过于底层和零碎。这个时候,我们可以考虑使用Springboot + WebJars + React。有如下好处 :目标web应用可以以jar包方式独立部署和运行;使用WebJar...原创 2019-04-19 09:25:43 · 1087 阅读 · 3 评论