qq_18661257的专栏

在众多HTML标签元素中，Form表单在React与HTML中使用是不同，比如如下HTML表单：<form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /></form>上述代码会在视图中形成一个表单，并让用户提交表单数据，但是

React为动画提供一个ReactTransitonGroup插件组件作为一个底层的动画API，一个ReactCSSTransitionGroup来简单地实现基本的CSS动画和过渡。1.高级组件：ReactCSSTransitionGroup(CSS渐变组)ReactCSSTransitionGroup是基于ReactTransitionGroup的，在React组件进入或者离开DOM的时候进行相关

React实现了一个独立于浏览器的DOM系统，跨浏览器兼容性特别好。在React中， 所有的DOM属性包括事件绑定都要使用托蜂命名法，比如tabindex在React中就变成了tabIndex，同时需要显示在DOM的属性需要用这两个前缀而且必须是小写，aria-*和data-*1.一些特殊的DOM属性在React中的处理 checked这个属性用在checkbox和radio中，可以使用它检测

上一篇博客讲了如何在React使用HTML属性，这次就是函数，但是此篇博客讲述的事件不完备，其他的希望大家自行学习 概念：合成事件（SyntheticEvent）是React事件系统的核心1.概要事件处理程序通过合成事件的实例进行传递，合成事件是浏览器原生事件跨浏览器的封装，SyntheticEvent和浏览器的原生事件一样有stopPropagation，preventDefault()接口

介绍JSX 什么是JSX？const element = <h1>Hello, world!</h1>;右边这种在javascript中出现的HTML语句就是JSX语法，JSX可以提供给你一个模板语言，快速开发前端UI组件，是javascript前端框架中的利器之一。React通过JSX可以快速的渲染出DOM节点，现在我开始说说JSX语法必备的一些基础知识。 这里重重声明，所谓的JSX一定

1.将JSX展现到DOM节点中React中的经常性的元素，我想大家知道JSX(不知道的读者，请看本人博客JSX讲解)，如下所示，言简意赅：const element = <h1>Hello, world</h1>;然而不同于浏览器中页面的DOM，React有自己的DOM，即JSX对象，React的一部分作用就是将JSX对象更新到网页中的DOM节点上，如何将JSX对象更新到DOM节点上就是一个关键性的

import createFragment from 'react-addons-create-fragment' // ES6var createFragment = require('react-addons-create-fragment') // ES5 with npmvar createFragment = React.addons.createFragment; // ES5 wi

何为组件？组件就是让你可以独立于UI的控件了，从某种意义上来看，组件的开发有点像javascript函数式编程，也就是说组件像是个函数，输入一定的数据，然后处理完输出，将数据展现在视图中。1.函数式组件(又称功能型组件)和类组件看标题大家就知道函数式组件是什么鬼了，也就是组件的开发，简单地说就是写一个函数，如下：function We(props) { return <h1>Hello, {p

注意此插件是一个被遗留的插件，如今好像更新为这个地址：https://github.com/kolodny/immutability-helper 引入import update from 'react-addons-update'; // ES6var update = require('react-addons-update'); // ES5 with npmvar update

PureRenderMixin的出现早于React.PureComponent，该插件属于历史保留，现在就使用React.PureComponent吧，这里也就提一下如果你的React组件的渲染函数是一个纯函数也就是说对于相同的值返回一样的结果同时不影响元素局，在某些场景下，你可以利用这个插件来极大地提升性能。var PureRenderMixin = require('react-addons-p

注意这玩意也已经被React.PureComponent的功能取代了，这里依旧是提一下（主要是React.v15的版本中的react-with-addons.js，这些玩意还存在，哎，害人呐） 引入import shallowCompare from 'react-addons-shallow-compare' // ES6var shallowCompare = require('rea

紧急事件提示这玩意已经被React v15给抛弃了，请直接用数据设置和函数处理。 引用import LinkedStateMixin from 'react-addons-linked-state-mixin' // ES6var LinkedStateMixin = require('react-addons-linked-state-mixin') // ES5 with npmva

我先拉拉对React-DOM输出那篇文章的知识点，从那篇文章中得知，至今为止我们只会用ReactDOM.render()去更改覆盖数据来进行视图更新，然而还是在时间的控制下进行变化。现在我们要做的就是让组件自己跑起来 何为state?State是一种类似于props的东西，属于组件元素的属性，但是它是私有的，并且完全被组件所控制，所以State只会存在于组件中，不是组件的话，可以走开了，并且它

React对于JSX事件处理的方式和DOM元素的事件绑定有点类似，但是有语法上的一些差异。React事件的命名必须是驼峰命名法，不能是小写，和我们写组件是一样的，我们的组件类的首写字母必须大写，不然会出问题,就是说onclick要写成onClick当我们在JSX语句中绑定事件时，我们不能用字符串，必须用大括号包裹一个函数表达式区别如下：//HTML<button onclick="taddl

1.条件化视图渲染的必要性当你创建不同的组件的时候，可能需要通过你的应用state的数据来显示数据class Creeting extends React.Component{ constructor(props){ super(props); this.state = { isLoggedIn : false };

React提供给我们声明式的API以至于我们根本不需要关心React内部到底做了什么，这让我们写代码变得轻松，但是我们还是非常有必要了解React内部实现机制，这对我们自己开发一个公司框架以及深入学习React是非常有帮助的。 这一篇博客就是深入的讲解React的更新机制，打开你内心世界React的大门，让我们见识见识diff算法的魅力吧，骚年们！1.算法魅力之前将性能优化的时候已经提到过基本

本章将讲述React代码库的组织，约定，和它的实现方式。如果你想更加关注React，或者说作为开发贡献者，对React进行一些修改，这篇博客或许可以帮到你。当然，我们没必要去过度的关注React应用的约定，因为其中有很多是历史遗留问题，后续版本可能会被pass掉。1.自定义模板系统在Facebook，他们内部人员使用了一个叫做Haste的自定义模板系统，这个系统非常类似CommonJS规范，也使用r

对于列表其实也就是数组，我们可以用数组的map函数对数组集体进行公操作，如下：const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);会对数组中的每一个元素执行乘22操作然后保存在doubled数组中。接下我们就要介绍React数组元素或者说是

1.概述 ReactDOMServer可以让你的组件运行在服务器renderToString()renderToStaticMarkup()2.实现 renderToString()ReactDOMServer.renderToString(element)这个函数用于将一个React组件渲染成一个HTML，在服务器端中，React会将组件处理成一个HTML字符串，然后再浏览器端进行渲

1.概述react-dom中的顶级APIrender()unmountComponentAtNode()findDOMNode() 浏览器支持情况React支持所有流行的浏览器，包括IE9+2.函数具体 render()ReactDOM.render( element, container, [callback])将React元素插入到被提供的容器中，同时返回一个组件的

经常，我们会遇到多个组件使用同一个数据，那时候我们就需要消除掉每一个组件中的数据，而构造出一个公共的祖先组件来处理。我将以一个温度测试组件来进行演示BoilingVerdict组件接受一个摄氏度，输出是否沸腾function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil

React自身有一套非常强大的组合模型，官方强烈建议使用组合来代替继承实现组件的重用性1.包容化组件所谓的包容化组件即为不管孩子是什么都可以加进这个容器中作为它的子组件，比如说我们的Dialog弹框，或者是导航栏等等代码如下：function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-'

1.再顾JSX语法从我第一篇博客来看，JSX其实就是提供了一个实现React.createElement(component, props, ...children)函数的便捷方法<MyButton color="blue" shadowSize={2}> Click Me</MyButton>React编译完后就形成了React.createElement( MyButton, {c

1.PropTypes类型检测React提供有一套类型检测的自己，通过React.PropTypes来进行控制class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}Greeting.propTypes = { na

在一般的数据流中也就是从上而下的单向数据流中，我们一般都是父组件要影响控制子组件必须要通过props来处理，即便是之前讲过this.state，但是那个东西也是针对自己的，而不是增对其它组件的，组件之间的影响到目前为止只能通过props来处理，这会非常的麻烦，所以React提供了一个特殊的接口来处理这种事件。 ref的用处ref用在处理表单空间聚焦，文本选择，媒体播放以及触发动画效果等等官方强

1.控制与非控制，何区？非控制型组件知识点非常简单，这里只是为了细分组件功能而增加的模块，对于控制型组件之前我已经说过是由于组件内部通过事件绑定进行控制。其实不然，真正区分控制型组件和非控制型组件的部分是this.state这个状态标记的属性，因为控制型组件实现的是完全控制，不仅单单是事件响应，仅此而已，它们对数据也进行了强行控制此为控制型的组件代码class NameForm extends Re

通常，React通常会在渲染到视图中去的时候，会使用几种特殊的技术最小化要更新的DOM节点从而实现性能优化，尽管在大部分的应用中，React为了更快的引导用户使用，而没有做太多的优化工作，然而这些技术的使用性是必要的。1.尽量避免更新在React建立和将内部的数据呈现给视图的过程中，React做了如下的事情：通过在真实DOM和React应用之间建立一个过渡层，这个过渡层有时被称为”虚拟DOM“。虽

平时我们写React组件的时候一般就是直接用类组件class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}现在你可以不使用ES6的类语法，而用React.createClass函数进行处理var Greeting = React.createCla

从开始学习React接触到JSX，就知道这个JSX语法就是一个用于简化的代码的方式，React并没有规定你一定要使用这个，你也可以用React.createElement(component,props,...children)纯的javascript语法来处理它JSX语法class Hello extends React.Component { render() { return <d

在React中很容易根据组件从而跟踪数据流，当你使用一个组件时，可以通过看props来判断用了哪一些东西。有时候你想直接通过组件树来讲数据传递子元素，而不是通过props一层一层的传递下去，可以使用React提供的contextAPI来处理。1.为什么一般都不使用Context虽然React提供了context来处理以上事件 ，但是一般情况下是不需要使用这个API的。如果你想要你的应用尽可能的稳定的

React和WEB组件React和WEB组件涉及不同领域，分别解决不同的问题，WEB组件提供组件的可复用性，而React确保数据的一致性，你可以在WEB组件中使用React，也可以在React中使用WEB组件。很多人在使用React时都不会使用WEB组件，但是可能你想使用第三方UI组件，极可能进行混用了。1.在React中使用WEB组件class HelloMessage extends Reac

HOC高级组件在React是一种比较先进的重用组件的方法，高级组件不是React的API，它是一种从React的组件方式中合并而成的一种模式，所以可以说HOC不是组件，而是一个处理模式准确地来说，HOC组件是一个处理组件并且返回新组件的函数，但是这个函数又是一个纯函数，遵循函数式编程规范。const EnhancedComponent = higherOrderComponent(WrappedCo

import Perf from 'react-addons-perf' // ES6语法var Perf = require('react-addons-perf') // ES5语法针对nodejsvar Perf = React.addons.Perf; // ES5语法，针对浏览器，增加react-with-addons.js在script标签中1.概要React本身就非常快速了，然而，

React是React库的对外接口，如果你使用script引入React，你就可以全局使用它，如果你是使用ES6的npm，你则需要用import React from 'react'，如果是使用ES5的npm，则写成var React = require('react') 组件相关React重用代码的方式就是组件，大部分UI要想在React中重用，一般都会写成组件的形式，只要将类继承React

套路语句组件是React提供给广大开发者的福利，一可重用，二可装逼，三可事件，简直逆天1.概述·React.Component·是一个抽象基类,因为是抽象类所以如果直接使用·React.Component·并没有什么卵用，所以，我们需要继承它，也可以说是让子类的原型指向它，产生子类，同时这个子类要包含至少render这个方法最简单的例子class Greeting extends React.Co

套路走起import ReactTestUtils from 'react-addons-test-utils' // ES6var ReactTestUtils = require('react-addons-test-utils') // ES5 with npmvar ReactTestUtils = React.addons.TestUtils; // ES5 with react-w

这一部分讲述的是堆栈调解器的实现React的API可以被分为三部分，核心，渲染器，调解器，如果你对代码库可能有点不了解的话，可以看我的博客其中堆栈调解器是React产品中最重要的部分，被React DOM和React Native渲染器共同使用，它的代码地址src/renderers/shared/stack/reconciler。1.从零开始构建React的历史Paul O'Shannessy给予