React<二>入门

前言

这是一篇打基础的文章，经过本文的基础学习，会发现打开了新世界的大门，要实现如下几个目标

1. react中文官方文档学习

2. 边学边练

3. 探索学习资源

---

学习一门技术的最快的方式就是看它的文档，跑官方的demo.

快速开始

我使用chrome浏览器，在分离文件时，文档中说要经过http服务，linux下能够建立软链，因而我在在服务器的网站目录下，软链到了如今的项目，这样就能继续使用这个项目的目录，同时又能跑在http服务上。

ln -s /Users/wang-xuan/project/react /XAMPP/xamppfiles/hthocs/react

-s 后面是源文件路径 最后是目标文件路径

提升开发效率

1.sublime设置
若是你是有的是sublime,并且对它还有一些小小的不满意，能够设置一下，
推荐一篇设置文章：Sublime Text3 - 实用设置

2.React调试工具
chrome和firefox都有调试工具，用起来很方便。

教程

资源加载

1. 为了每次访问没必要由于加载资源而太耗时，把资源都加载到本地文件
   

2. 使用marked是发现资源报错，引入文档中的marked资源便可

3. 编写假接口，api数据放在：public/api.comments
   引用： <CommentBox url="./api/comments" />

总结

1. 页面数据
   显示在页面上的变量有两种，一种是由父级控制的，一种是由本身的

   • props引用自父级，能够是变化的值，父级控制着数据变更；也能够是不变的。

   • state控制在本级，由组件本身控制状态变化

2. 获取页面变动
   因为React建立的是虚拟DOM,在DOM树建立完后才能引用，用refs来引用DOM,追踪文档变化。

3. 事件挂载
   事件应该挂载到最底层的公共父节点，例如要让CommentForm的改变反映到CommentList,则把控制处理挂载到CommentBox上，能够经过子组件的事件回调调用这个父级挂载的事件来实现逻辑控制。

实战进展

真正本身去编写代码才能有真正的成长，没有其它人能够代替你，选择一个本身感兴趣的小功能去亲自实战吧，个人实战能够做为你的参考。

在教程中学习了组件的解偶及事件的合适挂载位置,将它应用在实战中：

1. 先写总体的静态结构，组件解偶，不要让一个组件负责全部的事，拆分红父子结构更合理。

2. 考虑数据如何传递，数据应该属于本身控制仍是伏击控制，数据变化源在哪里，沿着数据流动方向写数据传输事件。

我重构了React<一>初接触的简历小管家

深刻理解 React

总结

项目的构建过程

1. 划分组件，肯定最小组件单元

2. 编写静态结构

3. 肯定state有哪些，在哪里建立

4. 编写反向数据流

问题

• SearchBar的渲染并非基于ProductTable的，它的数据为何要受ProductTable的控制，应该去掉ProductTable向SearchBar的数据流

实战进展

1. 对着本身的应用从新走一遍官网中的流程，并做出相应的改进

2. 看看应用有没有刻意增长的功能，
   我给简历小管家新增了搜索功能

为何使用React

构建随着时间数据不断变化的大规模应用程序

数据呈现

数据呈现的理念

React最大的特色就是虚拟DOM，万不得已不会操做真实DOM，主要是经过数据来改变页面的显示，页面分割为若干个组件，每一个组件只能渲染单个根节点，接受 props 和 state 来控制数据。

语法

React用JSX语法，能够用 HTML 语法去写 JavaScript 函数调用。
咱们把单一的功能单元拆分为组件，在组件中能够用HTML的语法直接建立节点，如：<a href="http://facebook.github.io/react/">Hello React!</a>

深刻理解 JSX

JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

转换

JSX 把类 XML 的语法转成纯粹 JavaScript

var Nav, Profile;
// 输入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 输出 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JavaScript 表达式

用｛｝包围，能够是变量、表达式、子节点和注释

表达式

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

子节点

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

注释

{/* 通常注释, 用 {} 包围 */}

实战进展

简历小管家规范化注释

JSX的延展属性

若是想要对props属性进行修改和扩展
很差的方式：

var component = <Component />;
component.props.foo = x; // 很差

好的方式：

var props = {};
props.foo = x;
var component = <Component {...props} />;

JSX 的陷阱

JSX 的文本中能够直接使用HTML实体，

<td>&middot;已投递公司</td>

可是要在表达式中传递实体会有问题

// 错误: 会显示 “First · Second”
<div>{'First &middot; Second'}</div>

4种解决方法：

1. 直接用 Unicode 字符

2. 找到 实体的 Unicode 编号，在 JavaScript 字符串里使用

3. 混合使用字符串和 JSX 元素

4. 直接使用原始 HTML

富交互性的动态用户界面

事件处理

用React写事件是基本不用作兼容性处理的，也不用给组件的事件处理绑定this，由于它的底层已经处理好了，并且很高效。
一切变化的数据源头都是state来控制的，this.state 应该仅包括能表示用户界面状态所需的最少数据

复合组件

复合方式

父组件中经过render返回子组件的方式，将自组件复合起来，Parent 能经过专门的 this.props.children props 读取子级。

子级校订及key的意义

什么是子级校订

校订就是每次 render 方法调用后 React 更新 DOM 的过程。
例如先有3个dom：一、二、3，通过事件处理，要变为二、3，该如何校订呢？直观上是删除1，实际是一、2-－》二、3，而后删除3，
能够经过隐藏组件而不是删除它们来绕过这些问题。

key的意义

经过给子级设置唯一标识的 key，会确保它们被从新排序（而不是破坏）或者删除（而不是重用）。
key的正确应用格式：把 key 添加到子级数组里组件自己上，而不是每一个子级内部最外层 HTML 上

// 错误！
// 子组件ListItemWrapper中
return <li key={this.props.data.id}>{this.props.data.text}</li>;
// 正确 :)
// 父组件生成子组件时
 return <ListItemWrapper key={result.id} data={result}/>;

性能

父级控制数据变化，经过props传递给子组件的过程是一个遍历子组件的过程，自己性能就很好，还能够经过shouldComponentUpdate() 方法返回 false ，来跳过一些子组件提升性能

可复用组件

复用是一项很是有用的技术，React组件为复用提供了简单、安全的方式，能够设置默认值，还能够对数据进行校验，还能够实现组件及逻辑的复用

Mixins

当一些组件须要共用一些耗性能的逻辑，咱们但愿这个通用的逻辑只存于调用这段逻辑的生命周期，Mixins能够作到！

传递 Props

React以组件的形式进行封装，用props来进行数据间的传递。
从上层传递过来的属性有两种用途

1. 本层使用
   2，继续传递供子层使用

若是上层传递过来的属性有不少，向下传递的属性也不少，一个一个传递事不现实的，须要批量传递，批量的同时又要摘除本层使用的属性。
解决方法

1. 在 JSX 里使用 ... 传递，能够实现批量

2. 解构赋值模式能够实现摘除属性

表单组件

在刚开始写React的表单时会感受奇怪，设置了value后没法在表单中输入值，react因为自身的限制：node.getAttribute('value')一直是初始值，值不能改变。
因而，组件分为受限的和不受限的，受限的能够经过onChange事件来改变值。
另外的特别之处是：React经过default...来设置默认值。

浏览器中的工做原理

DOM

React是很快的，由于它从不直接操做DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述，React可以利用内存中的描述来快速地计算出差别，而后更新浏览器中的DOM。
经过Refs和findDOMNode()调用已挂载的DOM

生命周期

关于Refs的更多内容

不要试图操做虚拟DOM，过Refs和findDOMNode()操做已挂载的DOM。

工具和插件

找本身感兴趣的进行探究
工具集成（Tooling Integration）
插件

学习资源推荐

精益 React 学习指南 （Lean React）
React 学习指南及前端干货
天天都实战一个React-Native项目
小菜鸟如何系统性学习React？

相关博客

React<一>初接触