SF
张亚涛
张亚涛
注册登录
关注博客
注册登录
主页
关于
RSS
React从入门到精通系列之(25)结束篇
张亚涛
2016-12-16
阅读 1 分钟
3.5k
二十五、结束篇 由于这些是之前文章都是写好的,现在在一周之内重新校验并发表了出来。过程自然很辛苦。。。 希望大家在阅读的过程中有什么问题都可以踊跃的提出来。 动机 其实写这一个系列的文章是有原因的,就是因为女朋友觉得我每天不学习,说我一点也不上进。所以我就写了这一个系列的文章,好堵住她的嘴。 自己可以...
React从入门到精通系列之(24)DOM Elements
张亚涛
2016-12-16
阅读 2 分钟
3.9k
React实现了一个独立于浏览器的DOM系统,用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现(恶心的原生DOM操作)。
React从入门到精通系列之(23)ReactDOM的用法
张亚涛
2016-12-16
阅读 2 分钟
6.6k
如果你使用script标签引用React,那么这些顶级API在全局变量ReactDOM上可直接使用。如果你使用了ES6和npm,你可以这么写import ReactDOM from 'react-dom'。如果你使用ES5和npm,你可以这写var ReactDOM = require('react-dom')。
React从入门到精通系列之(22)React.Component用法
张亚涛
2016-12-16
阅读 6 分钟
9k
React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类,并且至少定义一个render()方法即可使用。
React从入门到精通系列之(21)React顶级API
张亚涛
2016-12-16
阅读 5 分钟
8.9k
全局变量React是React库的入口。如果你通过一个script标签使用的React,那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6,你可以这样写:import React from 'react';。你是通过npm使用的ES5,你可以这样写var React = require('react');。
React从入门到精通系列之(20)用上下文管理应用
张亚涛
2016-12-16
阅读 5 分钟
4k
使用React可以很容易通过React组件跟踪数据流。 当你看到一个组件,你就可以看到哪些props正在传递,这使得你的应用很容易知道在做什么。
React从入门到精通系列之(19)彻底理解React如何重新处理DOM(Diffing算法)
张亚涛
2016-12-16
阅读 3 分钟
4.3k
React提供了一个声明式的API,所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的,不过这也让编写应用变得更加容易。
React从入门到精通系列之(18)不使用JSX编写React应用
张亚涛
2016-12-16
阅读 1 分钟
2.9k
React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX,那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。
React从入门到精通系列之(17)不使用ES6编写React应用
张亚涛
2016-12-16
阅读 4 分钟
3.2k
十七、不使用ES6编写React应用 通常你可以使用一个JavaScript的class功能来定义一个React组件: {代码...} 要是你还没有使用ES6的话,你就得使用React.createClass来创建一个组件了: {代码...} 使用ES6的class来创建一个组件有点类似于React.createClass,但是会有一些例外。 定义PropTypes和Props默认值 对于功能性组件...
React从入门到精通系列之(16)性能优化
张亚涛
2016-12-15
阅读 5 分钟
4.6k
十六、性能优化 在React内部,React使用了几种比较聪明的技术来实现最小化更新UI所需的昂贵的DOM操作的数量。 对于许多应用来说,使用React将很快速的渲染出用户界面,从而无需进行大量工作来专门做优化性能的工作。 大概有以下有几种方法来加快你的React应用程序。 使用生产环境的配置进行构建 如果你在React应用中进行...
React从入门到精通系列之(15)不可控组件
张亚涛
2016-12-15
阅读 2 分钟
3.9k
在大多数情况下,我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中,表单数据由React组件处理。 替代方法是使用不可控组件,其中表单数据是由DOM本身处理。
React从入门到精通系列之(14)refs和DOM元素
张亚涛
2016-12-15
阅读 2 分钟
8.5k
但是,在某些情况下,您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例,也可以是DOM元素。 对于这两种情况,React提供了一个以下这样的功能。
React从入门到精通系列之(13)使用PropTypes进行类型检测
张亚涛
2016-12-15
阅读 4 分钟
38.1k
随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScript)对整个应用程序进行类型检查。
React从入门到精通系列之(12)深入理解JSX
张亚涛
2016-12-15
阅读 8 分钟
4k
从根本上讲,JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码:
React从入门到精通系列之(11)组合VS继承
张亚涛
2016-12-14
阅读 4 分钟
4.5k
一些组件提前不知道它们的子组件是什么的。 这对于像Sidebar或Dialog这样的代表通用“框”的组件是特别常见的。我们建议这些组件使用特殊的children属性将子组件元素直接传递到他们中:
React从入门到精通系列之(10)提升state
张亚涛
2016-12-14
阅读 7 分钟
5.9k
接下来,我们创建一个名字叫Calculator的组件。它渲染一个<input>,让您输入温度,并将其值保存在this.state.value中。
React从入门到精通系列之(9)表单处理
张亚涛
2016-12-14
阅读 5 分钟
3.4k
HTML表单元素与React中的其他DOM元素有点不同,因为表单元素自然地保留一些内部状态。 例如,这种采用纯HTML格式的表单接受单个name:
React从入门到精通系列之(8)Lists和Keys的处理
张亚涛
2016-12-14
阅读 5 分钟
5.5k
您可以自己一个创建元素集合,并使用花括号{}将它们包含在JSX中。下面,我们使用Javascript map()函数循环一个数字数组。 我们为每个item返回一个<li>元素。 最后,我们将结果数组的元素赋给listItems:
React从入门到精通系列之(7)根据条件选择性渲染元素
张亚涛
2016-12-14
阅读 5 分钟
9k
在React中,您可以根据所需行为来创建并封装的不同组件。 然后,您可以根据某些条件来仅仅渲染其中的某一些。当然,这具体取决于当前应用程序的状态。
React从入门到精通系列之(6)事件处理
张亚涛
2016-12-13
阅读 3 分钟
4.6k
五、事件处理 使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异: React事件使用驼峰命名法,而不是全部小写命名。 使用JSX你传递一个函数作为事件处理程序,而不是一个字符串。 例如,HTML: {代码...} 在React中略有不同: {代码...} 另一个区别是,你不能返回false来防止React中的默认行...
React从入门到精通系列之(5)state管理和生命周期钩子
张亚涛
2016-12-13
阅读 7 分钟
6.1k
考虑前面部分中的滴答时钟示例(第三章)。到目前为止,我们只学习了一种更新UI的方法。我们调用ReactDOM.render()来改变渲染输出:
React从入门到精通系列之(4)组件化和Props传递
张亚涛
2016-12-13
阅读 6 分钟
5.6k
组件允许您将UI拆分为独立的可重用的部分,并单独地考虑每个部分。从概念上讲,组件就像JavaScript函数。 它们接受任意输入(称为“props”),并返回应该出现在屏幕上的React元素。
React从入门到精通系列之(3)渲染元素
张亚涛
2016-12-13
阅读 2 分钟
4.4k
note人们可能将元素与更广为人知的“组件”概念混淆。 我们将在下一节中介绍组件。 元素是由什么组件组成的,我们建议您在向前跳过之前阅读此部分。
React从入门到精通系列之(2)JSX的介绍
张亚涛
2016-12-13
阅读 2 分钟
6.7k
它被称为JSX,它是JavaScript的语法扩展。 我们建议使用它和React一起使用,以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言,但是它具有JavaScript的全部能力。
React从入门到精通系列之(1)安装React
张亚涛
2016-12-13
阅读 2 分钟
13.2k
React是灵活的,可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目。