《深入React技术栈》-- 读书笔记-CFANZ编程社区

React

把用户界面抽象成一个个组件
复用组件方式：引入 JSX 语法
能开发浏览器、原生移动应用

搭配

Flux
Redux
GraphQL/Relay

Virtual DOM

每次数据更新后，重新计算 Virtual DOM，并和上一次生成的 Virtual DOM 做对比，对发生变化的部分做批量更新。
直接提供 shouldComponentUpdate 生命周期方法，来减少数
据变化后不必要的 Virtual DOM 对比过程，以保证性能。

函数式编程

声明式编程: 模仿自己逻辑思考方式
React 把过去不断重复构建 UI 的过程抽象成了组件

JSX 语法

基于DOM的封装


1、原始DOM
<button class="btn btn-blue"> 
 <em>Confirm</em> 
</button>
2、转化成json对象：
{ 
 type: 'button', 
 props: { 
 className: 'btn btn-blue', 
 children: [{ 
 type: 'em', 
 props: { 
 children: 'Confirm' 
 } 
 }] 
 } 
}
3、封装成组件
const Button = ({ color, text }) => { 
 return { 
 type: 'button', 
 props: { 
 className: `btn btn-${color}`, 
 children: { 
 type: 'em', 
 props: { 
 children: text, 
 }, 
 }, 
 }, 
 }; 
}

4、jsx语法：

const DeleteAccount = () => ( 
 <div> 
 <p>Are you sure?</p> 
 <DangerButton>Confirm</DangerButton> 
 <Button color="blue">Cancel</Button> 
 </div> 
);

将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯
JavaScript 后由浏览器执行。JSX 在产品打包阶段都已经编译成纯 JavaScript

DeleteAccount 组件通过 Babel 转译成 React 可以执行的代码

var DeleteAccount = function DeleteAccount() { 
 return React.createElement( 
 'div', 
 null, 
 React.createElement( 
 'p', 
 null, 
 'Are you sure?' 
 ), 
 React.createElement( 
 DangerButton, 
 null, 
 'Confirm' 
 ), 
 React.createElement( 
 Button, 
 { color: 'blue' }, 
 'Cancel' 
 ) 
 );

元素属性

class 属性改为 className
for 属性改为 htmlFor

1、展开属性
const component = <Component name={name} value={value} />;

2、设置 props
const component = <Component />; 
component.props.name = name; 
component.props.value = value;

3、
const data = { name: 'foo', value: 'bar' }; 
const component = <Component name={data.name} value={data.value} />;

等价于

const data = { name: 'foo', value: 'bar' }; 
const component = <Component {...data} />;

自定义 HTML 属性

1、原始DOM
<div d="xxx">content</div>

2、要使用 data- 前缀
<div data-attr="xxx">content</div>

3、自定义标签中任意的属性都是被支持的
<x-my-component custom-attr="foo" />

组件的最终目的是输出虚拟元素，需要被渲染到界面的结构
核心渲染方法（组件输出方法）：render

属性表达式

属性值要使用表达式，只要用 {} 替换 "" 即可

1、 输入（JSX）
const person = <Person name={window.isLoggedIn ? window.name : ''} />;

2、// 输出（JavaScript）：
const person = React.createElement( 
 Person, 
 {name: window.isLoggedIn ? window.name : ''} 
);

转义解决办法

直接使用 UTF-8 字符
使用对应字符的 Unicode 编码查询编码
使用数组组装 <div>{['cc ', <span>©</span>, ' 2015']}</div>;
直接插入原始的 HTML
本身提供 dangerouslySetInnerHTML属性

<div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />

React 组件的构建方法

React.createClass
ES6 classes
无状态函数（stateless function）

1、React.createClass （ 0.14 版本发布）

const Button = React.createClass({ 
 getDefaultProps() { 
 return { 
 color: 'blue', 
 text: 'Confirm', 
 }; 
 }, 
 render() { 
 const { color, text } = this.props; 
 return ( 
 <button className={`btn btn-${color}`}> 
 <em>{text}</em> 
 </button> 
 ); 
 } 
});

2、ES6 classes
import React, { Component } from 'react';

class Button extends Component { 

 constructor(props) { 
 super(props); 
 }

 static defaultProps = { 
 color: 'blue', 
 text: 'Confirm', 
 };

 render() { 
 const { color, text } = this.props; 
 return ( 
 <button className={`btn btn-${color}`}> 
 <em>{text}</em> 
 </button> 
 ); 
 } 
}
a、React 的所有组件都继承自顶层类 React.Component
b、声明了 props、context、refs等，原型上定义了 setState 和
forceUpdate 方法

3、无状态函数 （ 0.14 版本之后新增，官方颇为推崇）
function Button({ color = 'blue', text = 'Confirm' }) { 
 return ( 
 <button className={`btn btn-${color}`}> 
 <em>{text}</em> 
 </button> 
 ); 
}

a、无状态组件只传入 props 和 context 两个参数
b、它不存在 state，也没有生命周期方法

React 数据流

数据是自顶向下单向流动的，即从父组件到子组件
state 与 props，state 只关心每个组件自己内部的状态
setState 是一个异步方法

import React, { Component } from 'react'; 

class Counter extends Component { 

 constructor(props) { 
 super(props); 
 this.handleClick = this.handleClick.bind(this); 
 this.state = { 
 count: 0, 
 }; 
 }

 handleClick(e) { 
 e.preventDefault();
 this.setState({ 
 count: this.state.count + 1, 
 }); 
 } 
 render() { 
 return ( 
 <div> 
 <p>{this.state.count}</p> 
 <a href="#" onClick={this.handleClick}>更新</a> 
 </div> 
 ); 
 } 
}

props

React 用来让组件之间互相联系的一种机制
className
classPrefix
onChange

与父组件通信

this.props.onChange({activeIndex, prevIndex});

propTypes

类型检查，规范 props 的类型与必需的状态
不仅有基本类型，还包括枚举和自定义类型
函数类型的检查是 propTypes.func，而不是 propTypes.function。
对于布尔类型的检查是 propTypes.bool，而不是 propTypes.boolean。
这是因为 function 和boolean 在 JavaScript 里是关键词。


static propTypes = { 
 classPrefix: React.PropTypes.string, 
 className: React.PropTypes.string, 
 defaultActiveIndex: React.PropTypes.number, 
 activeIndex: React.PropTypes.number, 
 onChange: React.PropTypes.func, 
 children: React.PropTypes.oneOfType([ 
 React.PropTypes.arrayOf(React.PropTypes.node), 
 React.PropTypes.node, 
 ]), 
};