Jane617_min的专栏

1， 自动化的UI 状态管理 2， 快速的DOM 操作 3， 创建可重用的UI组件 4， UI 的纯JS 开发 5， React 是MVC 模式中的V这几点是React 设计的基本原则和应用特色，是React 在众多开发 框架中脱颖而出的主要原因。在开发过程，会接触以下⼏几点知识：1， 项目中会引入JSX，React程序的重要概念。 2， 搭建起React应用的基本框架 3， 如何依赖React ...

应对生命周期的是组件的生命周期函数，在组件从创建，加载，到最后删除的这段周期里，不同的时间点，React 框架都会调用组件的不同的生命周期函数。这些函数被调用时，本质上是框架在传达信息，它告诉我们，组件当前正在处于某个特殊的时间点上。生命周期函数就是组件本身具备的一些被框架在适当时间调用的固定接口而已，先看几个比较重要的几个周期函数：1，componentWillMount 2，component...

React 使用最多的，是设计应用的设计UI,而用户界面一个最重要的目的是以有效的方式响应用户输入。用户输入多种多样，有鼠标点击，有键盘按键，有窗口大小的更改，如果运行在手机上的话，还得响应拖拽等手势操作。应对这些复杂的情形的办法是抽象，把用户的任何操作都当做一种事件，如果你了解原来的web开发的话，那么你一定知道，很多开发的精力都要放在响应DOM事件的处理之上。做一个简单的程序（把页面显示给用户...

应用程序必须运用在一个“活”的情景中，由于组件是程序的基本组成单位，它必须得主动应对不断变化的场景。它必须能够和用户互动，对用户的输入做出响应。所以我们需要一种能够给组件注入“生命”的机制，让组件灵活应对具体场景中的不同变化，由此我们需要一种除了属性之外的数据存储机制，这种机制能够使得所存储的数据根据需要不断变化，同时 ，一旦数据变化后，组件根据数据的变动做相应的反应，便把反应 呈现到界面，这种机...

JSX是一种类似于html标签组合的语法对象，JSX实例如下：var Card = React.createClass({ render: function() { return ( <div> <Square color={this.props.color}/> ...

上篇文章中，已使用组件技术，实现了一个“五彩冰粉”的网页控件。 从中可以体会到，组件其实就是把html, javascript, 和css 以有机的方式结合在一起，形成一个高度可重用的独立单元本篇文章中，将研究组件的另一特性，就是它的组合性，React组件 技术的一大杀伤力在于，它能让我们通过把微小简单的组件结合起来，进而创造出复杂强大的复合组件，把控件分解成 若干个简单的控件，然后把这些简单小控...

当我们完成程序的基本功能后，不对程序界面进行打磨妆点，那么过于素颜的界面，对用户是产生不了吸引力的。对于网页应用而言，用来美化界面的技术，一直都是CSS,CSS是一种好技术，它能将界面的美化和程序的功能逻辑进行良好的分离。特别是它的选择子功能，能够让开发者针对某个具体控件进行美化。然而在React 框架下，我们不好继续使用CSS来设计界面，这是由 React的设计思想所决定的。React的核新思想...

1，组件是React 开发框架中，最重要的设计概念。这也是React能够 帮助我们简单容易的开发复杂用户界面的有效利器。假定我们最终开发的网页应用如图所示，它的界面右1系列复杂的 控件元素组合而成。原有的设计思想是，把这些复杂的控件组合当做一个单一整体来开发，由于控件间需要相互通讯，因此不同组件间 耦合度很多，开发1个控件时，你需要考虑这个控件与其他控件的 相互联系，这样一来设计思路会变得非常复杂...

基本的环境准备 我们开发的是web APP应用，所以我们至少需要个Http服务器。首先nodejs环境下 执行  http.server 这样，一个小型http服务器就可以启动了，我们可以通过浏览器， 访问该目录下所有文件，我们的代码将存储在该目录。在该录下新建个文件，叫做index.html,这个文件将是我们 源代码的编写文件首先第1步，我们先编写整个app的⻣架：<!DOCTYPE ht...

1， 老式的多页网络应用今日，各种丰富精巧的网络应用层出不穷，甚至把各种功能和界面异常复杂的桌面应用都套到了了Web里，像微软现金奶牛的Office套件，是多么复杂的一种桌面应用程序，它的代码量量跟windows操作系统几乎不不相上下，这种庞然大物居然能装到Web里里面，可见近几年来Web技术的发展可谓突飞猛进。如果没有像React 这种强大的技术框架支持，要开发这种网页应用根本就是不不可想象的。...

应用程序等于用户界面加底层数据，一个有用的软件，它的本质是 数据处理要探讨底层数据与UI的结合，开发一个完整的程序，还得应对很多数据结构，例如jSON对象，数组等，通过一个具体事例，看看在React框架下，数据是如何 与用户界面耦合起来的。var destination = document.querySelector("#container");var Circle = React.creat...