120分钟React快速扫盲教程
Posted strick
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了120分钟React快速扫盲教程相关的知识，希望对你有一定的参考价值。
在教程开端先说些题外话，我喜欢在学习一门新技术或读过一本书后，写一篇教程或总结，既能帮助消化，也能加深印象和发现自己未注意的细节，写的过程其实仍然是一个学习的过程。有个记录的话，在未来需要用到相关知识时，也方便自己查阅。
React既不是一个MVC框架，也不是一个模板引擎，而是Facebook在2013年推出的一个专注于视图层，用来构建用户界面的javascript库。它推崇组件式应用开发，而组件（component）是一段独立的、可重用的、用于完成某个功能的代码，包含了html、CSS和JavaScript三部分内容。React为了保持灵活性，只实现了核心功能，提供了少量的API，一些DOM方法都被剥离到了react-dom.js中。这么做虽然轻巧，但有时候要完成特定的业务场景，还是需要与其他库结合，例如Redux、Flux等。React不仅让函数式编程愈加流行，还引入了JSX语法（能把HTML嵌入进JavaScript中）和Virtual DOM技术，大大提升了更新页面时的性能。在React中，每个组件的呈现和行为都由特定的数据所决定，而数据的流动都是单向的，即单向数据流。在编写React时，推荐使用ES6语法，官方的文档也使用了ES6语法，因此，在学习React之前，建议对ES6有所了解，避免不必要的困惑。
下面是一段较为完整的React代码，本文大部分的示例代码来源于此，阅读下面的代码可以对React有一个感性的认识。
import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
import PropTypes from ‘prop-types‘;
class Search extends Component {
//static defaultProps = {
// url: "http://jane.com"
//};
constructor(props) {
super(props);
this.state = {
txt: "请输入关键字"
};
}
componentWillMount() {
console.log("component will mount");
}
componentDidMount() {
console.log("component did mount");
this.refs.txt.addEventListener("blur", (e) => {
this.getValue(e);
});
console.log(this.refs)
}
handle(keyword, e) {
console.log(keyword);
console.log(this);
console.log(this.select.value);
}
getValue(e) {
console.log(e.target.value);
}
refresh(e) {
this.setState({
type: e.target.value
});
}
render() {
console.log("render");
let {type} = this.state;
console.log(type);
return (
<div>
{this.props.children}
<select value={type} onChange={this.refresh.bind(this)}>
<option value="1">标题</option>
<option value="2">内容</option>
</select>
<select defaultValue={2} ref={(select) => this.select = select}>
<option value="1">标题</option>
<option value="2">内容</option>
</select>
<input placeholder={this.state.txt} ref="txt" defaultValue="教程" style={{marginLeft:10, textAlign:"center"}}/>
<button className="btn" data-url={this.props.url} onClick={this.handle.bind(this, "REACT")}>{"<搜索>"}</button>
</div>
);
}
}
Search.defaultProps = {
url: "http://jane.com"
};
ReactDOM.render(
<Search url="http://www.pwstrick.com">
<h1>React扫盲教程</h1>
</Search>,
document.getElementById("container")
);
一、JSX语法
JSX是对JavaScript语法的一种扩展，它看起来像HTML，同样拥有清晰的DOM树状结构和元素属性，如下代码所示。但与HTML不同的是，为了避免自动插入分号时出现问题，在最外层得用圆括号包裹，并且必须用一个元素包裹（例如下面的<div>元素）其它元素，所有的元素还必须得闭合。
(<div>
<input placeholder={this.state.txt} />
<button className="btn">{"<搜索>"}</button>
</div>)
1）元素
JSX中的元素分为两种：DOM元素和组件元素（也叫React元素），DOM元素就是HTML文档映射的节点，首字母要小写；而组件元素的首字母要大写。无论是DOM元素还是组件元素，最终都会通过React.createElement()方法转换成JSON对象，如下所示，JSON对象是简化过的。
//React.createElement()方法 React.createElement("div", null, [ React.createElement("input", { placeholder: `${this.state.txt}` }, null), React.createElement("button", { className: "btn" }, "<搜索>") ]); //简化过的JSON对象 { type: "div", props: { children: [ { type: "input", props: { placeholder: `${this.state.txt}` } }, { type: "button", props: { className: "btn", children: "<搜索>" } } ] } }
由于JSX中的元素能够被编译成对象，因此还可以把它们应用到条件、循环等语句中，或者作为一个值应用到变量和参数上。
2）属性
JSX中的属性要用驼峰的方式表示，例如maxlength要改成maxLength、readonly要改成readOnly。还有两个比较特殊的属性：class和for，由于这两个是JavaScript中的关键字，因此要改名，前者改成className，后者改成htmlFor。
JSX中的属性值不仅可以是字符串，还可以是表达式。如果是表达式，那么就要用花括号（“{}”）包裹。而在JSX中，任何位置都可以使用表达式。
有一点要注意，为了防止XSS的攻击，React会把所有要显示到DOM中的字符串进行转义，例如“<搜索>”转义成“<搜索>”。
3）Virtual DOM
众所周知，DOM操作会引起重绘和重排，而这是非常消耗性能的。React能把元素转换成对象，也就是说可以用对象来表示DOM树，而这个存在于内存中的对象正是Virtual DOM。Virtual DOM相当于一个缓存，当数据更新后，React会重新计算Virtual DOM，再与上一次的Virtual DOM通过diff算法做比对（如下图所示），最后只在页面中更新修改过的DOM。由于大部分的操作都在内存中进行，因此性能将会有很大的提升。
二、组件
组件的构建方式有3种：React.createClass()、ES6的类和函数。当用ES6的类来构建时，所有的组件都继承自抽象基础类React.Component，该抽象类声明了state、props、defaultProps和displayName等属性，定义了render()、setState()和forceUpdate()等方法。注意，在组件的构造函数constructor()中要调用super()函数，用于初始化this和执行抽象类的构造函数。
import React, { Component } from ‘react‘;
class Search extends Component {
constructor (props) {
super(props);
}
render() {
return ();
}
}
组件中的render()方法是必须的，它会返回一个元素、数字或字符串等各种值。render()是一个纯函数，即输出（返回值）只依赖输入（参数），并且执行过程中没有副作用（不改变外部状态）。
组件之间可以相互嵌套，而它们的数据流是自顶向下流动的（如下图所示），即父组件将数据传给子组件。此处传递的数据就是组件的配置参数，由props属性控制，而组件的内部状态保存在state属性中。
1）props
如果一个组件要做到可复用，那么它应该是可配置的。为此，React提供了props属性，它的使用如下所示。
class Search extends Component { render() { return ( <div> <button className="btn" data-url={this.props.url}>{"<搜索>"}</button> </div> ); } } <Search url="http://www.pwstrick.com" />
先给Search组件定义一个名为url的属性，然后在组件内部，可以通过引用props属性来获取url的值。有一点要注意，props是只读属性，因此在组件内部无法修改它。
React为组件提供了默认的配置，可以调用它的静态属性defaultProps。总共有两种写法实现默认配置，如下代码所示，其中写法一用到了ES6中的static关键字。
//写法一 class Search extends Component { static defaultProps = { url: "http://jane.com" }; } //写法二 Search.defaultProps = { url: "http://jane.com" }; <Search />
此时，即使组件不定义url属性，在组件内部还是会有值。
props还有一个特殊的属性：children，它的值是组件内的子元素，如下代码所示，children属性的值为“<h1>React扫盲教程</h1>”。
class Search extends Component { render() { return ( <div> {this.props.children} </div> ); } } <Search> <h1>React扫盲教程</h1> </Search>
2）state
组件的呈现会随着内部状态和外部配置而改变，通常会在组件的构造函数中初始化需要的内部状态，如下代码所示，为文本框添加默认提示。
class Search extends Component { constructor (props) { super(props); this.state = { txt: "请输入关键字" }; } }
React还提供了setState()方法，用于更新组件的状态。注意，不要通过直接为state赋值的方式来更新状态，因为setState()方法在更新状态后，还会调用render()方法，重新渲染组件。此外，React为了提升性能，会把多次setState()调用合并成一次，像下面这样写打印出的txt属性的值仍然是前一次的值，因此状态更新是异步的。
this.setState({ txt: "React" }); console.log(this.state.txt); //"请输入关键字"
3）生命周期
组件的生命周期（life cycle）可简单的分为4个阶段：初始化（Initialization）、挂载（Mounting）、更新（Updation）和卸载（Unmounting），具体如下图所示。每个阶段都会对应几个方法，其中包含will的方法会在某个方法之前被调用，而包含did的方法会在某个方法之后被调用。
1、在初始化阶段，会设置props、state等属性。
2、在挂载阶段，两个挂载方法将以组件的render()为分界点。
3、更新阶段发生在传递props或执行setState()的时候。
4、当一个组件被移除时，就会调用componentWillUnmount()方法。
当组件在页面中输出时，在控制台将依次输出“will mount”、“render”和“did mount”。
class Search extends Component { componentWillMount() { console.log("will mount"); } componentDidMount() { console.log("did mount"); } render() { console.log("render"); } }
三、React和DOM
1）ReactDOM
如果要把组件添加到真实的DOM中，那么就需要使用ReactDOM中的render()方法，如下代码所示，其实在前面已经调用过几次这个方法了。
ReactDOM.render( <Search />, document.getElementById("container") );
此方法可接收三个参数，第一个是要渲染（即添加）的元素，第二个是容器元素（即添加的位置），第三个是可选的回调函数，会在渲染或更新之后执行。
ReactDOM还提供了另外两个方法：unmountComponentAtNode()和unmountComponentAtNode()，具体可参考官方文档。
2）事件
React实现了一种合成事件（SyntheticEvent），合成事件只有冒泡传播，并且它的注册方式、事件对象和事件处理程序中的this对象都与原生事件不同。
1、合成事件会通过设置元素的属性来注册事件，但与原生事件不同的是，属性的命名要用驼峰的写法而不是全部小写，并且属性值可以是任意类型而不再仅是字符串，如下代码所示。React已经封装好了一系列的事件类型（原生事件类型的一个子集），并且已经处理好它们的兼容性，提供的事件类型可以参考官网。
class Search extends Component { handle(e) { console.log("click"); } render() { return ( <div> <button onClick={this.handle}>搜索</button> </div> ); } }
2、合成事件中的事件对象（event object）是一个基于W3C标准的SyntheticEvent对象的实例，它不但与原生的事件对象拥有相同的属性和方法（例如cancelable、preventDefault()、stopPropagation()等），还完美解决了兼容性问题。
3、React的事件处理程序中的this对象默认是undefined，因为注册的事件都是以普通函数的方式调用的。如果要让this指向当前组件，那么可以用bind()方法或ES6的箭头函数。
class Search extends Component { //bind()方法 handle1(e) { console.log(this); } //箭头函数 handle2 = (e) => { console.log(this); }; render() { return ( <div> <button onClick={this.handle1.bind(this)}>搜索</button> <button onClick={this.handle2}>搜索</button> </div> ); } }
4、在向事件处理程序传递参数时，要把事件对象放在最后，如下代码所示。
class Search extends Component { handle(keyword, e) { console.log(keyword); console.log(this); } render() { return ( <div> <button onClick={this.handle1.bind(this, "REACT")}>搜索</button> </div> ); } }
5、如果要为组件中某个元素注册原生事件，那么可以利用元素的ref属性和组件的refs对象实现。例如实现一个文本框在失去焦点时，打印输出它的值，如下代码所示。注意，原生事件的注册要在componentDidMount()方法内执行。
class Search extends Component { componentDidMount() { this.refs.txt.addEventListener("blur", (e) => { this.getValue(e); }); } getValue(e) { console.log(e.target.value); } render() { return ( <div> <input placeholder={this.state.txt} ref="txt" /> </div> ); } }
在上面的代码中，ref属性的值被设为了“txt”，此时，在refs对象中就会出现一个名为“txt”的属性，关于这个它们的具体用法可以参考官网。
3）表单
HTML中的表单元素（例如<input>、<select>和<radio>等）在React都有相应的组件实现，React还把表单中的组件分为受控和非受控。
受控组件（controlled component）的状态由React组件控制，它的每个状态的改变都会有一个与之对应的事件处理程序，并且在程序内部会调用setState()方法更新状态。React推荐使用受控组件，下面是一个受控组件，注意，选择框（<select>元素）中的value属性表示选中项。
class Search extends Component { refresh(e) { this.setState({ type: e.target.value }); } render() { let {type} = this.state; return ( <div> <select value={type} onChange={this.refresh.bind(this)}> <option value="1">标题</option> <option value="2">内容</option> </select> </div> ); } }
非受控组件（uncontrolled component）的状态不受React组件控制，也不用为每个状态编写对应的事件处理程序，但可以通过元素的ref属性获取它的值，非受控组件的写法更像是传统的DOM操作。在使用非受控组件时，如果要为其设置默认值，可以使用属性defaultValue或defaultChecked，具体如下所示。
class Search extends Component { handle(e) { console.log(this.select.value); } render() { return ( <div> <select defaultValue={2} ref={(select) => this.select = select}> <option value="1">标题</option> <option value="2">内容</option> </select> <button onClick={this.handle.bind(this)}>搜索</button> </div> ); } }
4）样式
在React问世的初期，由于它推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，这与过去的关注点分离正好相反。React已将HTML用JSX封装，而对CSS的封装，则抛出了CSS in JS的解决方案，即用JavaScript写CSS。
在React中的元素都包含className和style属性，前者可设置CSS类，后者可定义内联样式。style的属性值是一个对象，其属性就是CSS属性，但属性名要用驼峰的方式命名，例如margin-left改成marginLeft，具体如下所示。
class Search extends Component { render() { return ( <div> <input style={{marginLeft:10, textAlign:"center"}}/> </div> ); } }
注意，属性名不会自动补全浏览器前缀，并且React会自动给需要单位的数字加上px。在MDN上给出了CSS属性用JavaScript命名的对应关系，可在此处参考。
由于React处理CSS的功能并不强大，因此市面上出现了很多与CSS in JS相关第三方类库，例如classnames、polished.js等，有外国网友还专门搜集了40多种相关的类库。
虽然这种方式能让组件更方便的模块化，但同时也彻底抛弃了CSS，既不能使用CSS的特性（例如选择器、媒体查询等），也无法再用CSS预处理器（例如SASS、LESS等）。为了解决上述问题，又有人提出了CSS Modules。
如果要在React中制作动画，官方推荐使用React Transition Group和React Motion。不过，你也可以使用普通的动画库（例如animejs），只要在DOM渲染好以后调用即可。
四、React进阶
1）跨级通信
React数据流动是单向的，组件之间通信最常见的方式是父组件通过props向子组件传递信息，但这种方式只能逐级传递，如果要跨级通信（即父组件与孙子组件通信），那么可以利用状态提升实现，但这样的话，代码会显得很不优雅并且很臃肿。好在React包含一个Context特性，可以满足刚刚的需求，不过官方不建议大量使用该特性，因为它不但会增加组件之间的耦合性，还会让应用变得混乱不堪，下图演示了两种数据传递的过程。在理解Context特性后，能更合理的使用状态管理容器Redux。
当一个组件设置了Context后，它的子组件就能直接访问Context中的内容，Context相当于一个全局变量，但作用域仅限于它的子组件中。总共有两种Context的实现方式，都基于生产者消费者模式。首先来看第一种，具体代码如下所示。
import PropTypes from ‘prop-types‘; class Grandpa extends Component { getChildContext() { return { name: "strick" }; } render() { return (<Son />); } } Grandpa.childContextTypes = { name: PropTypes.string }; class Son extends Component { render() { return (<Grandson />); } } class Grandson extends Component { render() { let { name } = this.context; return (<div>爷爷叫{name}</div>); } } Grandson.contextTypes = { name: PropTypes.string };
在上面的代码中，创建了三个组件，Grandpa是最上层的父组件（生产者），Son是中间的子组件，Grandson是最下层的孙子组件（消费者）。首先在Grandpa中，声明了一个静态属性childContextTypes和一个getChildContext()方法，这两个是必须的，否则无法实现数据传递。其中childContextTypes是一个对象，它的属性名就是要传递的变量名，而属性值则通过PropTypes指明了该变量的数据类型，getChildContext()方法返回的对象就是要传递的一组变量和它们的值。然后在Son中渲染Grandson组件。最后为Grandson声明一个静态属性contextTypes，同样是个对象，并且属性名和属性值与childContextTypes中的相同。
第二种方式是在React 16.3的版本中引入的，比起第一种方式，写法更加简洁，并且Context的生产者和消费者都以组件的方式实现，如下所示。
let NameContext = React.createContext({ name }); class Grandpa extends Component { render() { return ( <NameContext.Provider value={{name: "strick"}}> <Son /> </NameContext.Provider> ); } } class Son extends Component { render() { return (<Grandson />); } } class Grandson extends Component { render() { return ( <NameContext.Consumer> {(context) => ( <div>爷爷叫{context.name}</div> )} </NameContext.Consumer> ); } }
上面的代码依然创建了三个组件，名字也和第一种方式中的相同。除了中间组件Son之外，另外两个组件的内容发生了变化。首先，通过React.createContext()方法创建一个Context对象，此对象包含两个组件：Provider和Consumer，前者是生产者，后者是消费者。然后在Grandpa的render()方法中设置Provider组件的value属性，此属性相当于getChildContext()方法。最后在Grandson组件中调用Context对象，注意，Consumer组件的子节点只能是一个函数。
2）高阶组件
高阶组件（higher-order component，简称HOC）不是一个真的组件，而是一个函数，它的参数中包含组件，其返回值是一个功能增强的新组件。高阶组件是一个没有副作用的纯函数，它遵循了装饰者模式的设计思想，不会修改传递进来的原组件，而是对其进行包装和拓展，不仅增强了组件的复用性和灵活性，还保持了组件的易用性。下面演示了高阶组件是如何控制props和state的。
class Button extends Component { render() { return ( <div> <button>{ this.props.txt }</button> </div> ); } } //高阶组件 function HOC(Mine) { class Wrapped extends Component { constructor() { super(); this.state = { txt: "提交" }; } render() { return <Mine {...this.state} />; } } return Wrapped; } let Wrapped = HOC(Button);
高阶组件HOC()的函数体中创建了一个名为Wrapped的组件，在它的构造函数中初始化了state状态。然后在其render()方法中使用了{...this.state}，这是JSX的一种语法，在state对象前添加扩展运算符，可把它解构成组件的一组属性。最后在Button组件中调用传递进来的属性。
高阶组件还有迁移重复代码、劫持render()方法和引用refs等功能。
五、后记
就先整理这些了，如有错误，欢迎指正，后面还会陆续加入漏掉的知识点。
最后，我想说下，其实自己也是一个React初学者，通过这样的梳理后，对React有了更为深刻的理解，在后续的学习中能容易的吸收新的知识点。
源码下载：
https://github.com/pwstrick/react
参考资料：
以上是关于120分钟React快速扫盲教程的主要内容，如果未能解决你的问题，请参考以下文章