浅谈 React

Posted 2020-08-22 菜鸟提升记

机缘巧合认识React，翻了2天的资料，又整理了1天，也算是简单入门了;之前也学过angular，相比来说，的确React代码逻辑更加简单明了，理解起来也相对容易。

React 具备以下特性：1.声明式设计 ?React采用声明范式，可以轻松描述应用。

　　　　　　　　　　2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。

　　　　　　　　　　3.灵活 ?React可以与已知的库或框架很好地配合。

　　　　　　　　　　4.JSX ? JSX 是 javascript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

　　　　　　　　　　5.组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

　　　　　　　　　　6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

下面是我整理的一些关于React的入门知识

注：下面所示事例中只引入react.js（核心JS）、react-dom.js（关于DOM的JS）、browser.min.js（JSX解读），可直接到官网下载最新的源码：https://facebook.github.io/react/

一、ReactDOM.render 是 React 的最基本方法：用于将模板转为 html 语言，并插入指定的 DOM 节点

ReactDOM.render(
　　<h1>Hellow World!</h1>,
　　document.getElementById(‘example‘)
);

二、JSX 语法 -- React 首次提出的一种语言

JSX 语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员,添加到模板。

例1：var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];

ReactDOM.render(
　　　<div>
　　　　　{
　　　　　　　names.map(function (name) {
　　　　　　　　　return <div><span>Hello, {name}!</span></div>
　　　　　　　})
　　　　　}
　　　</div>,
　　document.getElementById(‘example‘)
);

例2：var arr = [

　　　　　　　　<h1>I have a dream!</h1>,
　　　　　　　　<h2>I have a day！</h2>,
　　　　　　　　];
ReactDOM.render(
　　<div>{arr}</div>,
　　document.getElementById(‘example‘)
);

JSX具备以下优点：1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

　　　　　　　　　2.它是类型安全的，在编译过程中就能发现错误。

　　　　　　　　　3.使用 JSX 编写模板更加简单快速。

三、组件 API

　　1.设置状态：setState

　　2.替换状态：replaceState

　　3.设置属性setProps

　　4.替换属性replaceProps

　　5.强制更新：forceUpdate

　　6.获取DOM节点：findDOMNode

　　7.判断组件挂载状态：isMounted

　　8.生成组件类：createClass

（关于createClass）：React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

注意：添加组件属性，需要注意的就是 class 属性需要写成 className ，for 属性需要写成 htmlFor，因为for与class 是 JS 中的关键字（其他属性可直接使用）

例：

var HelloMessage = React.createClass({
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<h1>{this.props.name}</h1>
　　　　　　　　<a href={this.props.site}>{this.props.site}</a>
　　　　　　</div>

　　　　　)
　　}
});

ReactDOM.render(
　　<HelloMessage name="百度" site="www.baidu.com"/>,
　　document.getElementById(‘example‘)
);

复合组件：通过创建多个组件来合成一个组件

var HelloMessage = React.createClass({
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<Name name={this.props.name}/>
　　　　　　　　<Site site={this.props.site}/>
　　　　　　</div>
　　　　)
　　}
});

var Name = React.createClass({
　　render: function() {
　　　　return <h1>{this.props.name}</h1>
　　}
});
var Site = React.createClass({
　　render: function() {
　　　　return <a href={this.props.site}>{this.props.site}</a>
　　}
});

ReactDOM.render(
　　<HelloMessage name="百度" site="www.baidu.com"/>,
　　document.getElementById(‘example‘)
);

四、this.props.children 属性

前面的例子中提到：this.props 表示对象的属性与组件的属性一一对应；但是 this.props.children 属性表示组件的所有子节点

var NotesList = React.createClass({
　　render: function() {
　　　　return (
　　　　　　<ol>
　　　　　　　　{
　　　　　　　　　　React.Children.map(this.props.children, function (child) {

　　　　　　　　　　　　return <li>{child}</li>;

　　　　　　　　　　)
　　　　　　　　}
　　　　　　</ol>
　　　　);
　　}
});

ReactDOM.render(
　　<NotesList>
　　　　<span>LiLei</span>
　　　　<span>HanMeimei</span>
　　</NotesList>,
　　document.getElementById(‘example‘)
);

 　　this.props.children 的值有三种可能:  1.如果当前组件没有子节点，它就是 undefined

　　　　　　　　　　　　　　　　　　　　2.如果有一个子节点，数据类型是 object

　　　　　　　　　　　　　　　　　　　　3.如果有多个子节点，数据类型就是 array

五、React State (状态)

与用户互动，导致状态变化，根据新的 state 重新渲染用户界面（常用于输入框中）

var Input = React.createClass({
　　getInitialState: function() {
　　　　return {value: ‘Hello!‘};
　　},
　　handleChange: function(event) {
　　　　this.setState({value: event.target.value});
　　},
　　render: function () {
　　　　var value = this.state.value;
　　　　return (
　　　　　　<div>
　　　　　　　　<input type="text" value={value} onChange={this.handleChange} />
　　　　　　　　<p>{value}</p>
　　　　　　</div>
　　　　);
　　}
});

ReactDOM.render(<Input/>, document.getElementById(‘example‘));

注：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，特性是不再改变的，而 this.state 特性是会随着用户互动而产生变化的。

六、PropTypes 属性

就是用来验证组件实例的属性是否符合要求：有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求（提供给代码人员自己识别）

var data = ‘123‘;

var MyTitle = React.createClass({
　　propTypes: {
　　　　title: React.PropTypes.number,
　　},

　　render: function() {
　　　　return <h1> {this.props.title} </h1>;
　　}
});

ReactDOM.render(
　　<MyTitle title={data} />,
　　document.getElementById(‘example‘)
);

结果：正常输出“123”，打开开发者工具会有一段错误输出（具体可自己试试）

七、refs 属性

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

this.refs[myRefsName] 获取真实的DOM节点

var MyComponent = React.createClass({
　　handleClick: function() {
　　　　this.refs.myTextInput.focus();
　　},
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<input type="text" ref="myTextInput" />
　　　　　　　　<input type="button" value="点击进行编写" onClick={this.handleClick} />
　　　　　　</div>
　　　　);
　　}　　
});

ReactDOM.render(
　　<MyComponent />,
　　document.getElementById(‘example‘)
);

八、组件的生命周期

组件的生命周期分成三个状态：

　　1、Mounting：已插入真实 DOM

　　2、Updating：正在被重新渲染

　　3、Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用,三种状态共计五种处理函数 + 两种特殊状态的处理函数；

具体参见：https://facebook.github.io/react/docs/react-component.html

九、React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

var UserGist = React.createClass({
　　getInitialState: function() {
　　　　return {
　　　　　　username: ‘‘,
　　　　　　userhobby: ‘‘
　　　　};
　　},
　　componentDidMount: function() {
　　　　$.get(this.props.source, function (result) {
　　　　　　　this.setState({
　　　　　　　　　　username: result.name,
　　　　　　　　　　userhobby: result.hobby
　　　　　　　　});
　　　　　　}.bind(this),‘json‘);
　　},

　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<p>姓名：{this.state.username} </p>
　　　　　　　　<p>爱好：{this.state.userhobby} </p>

　　　　　　</div>
　　　　　　);
　　　}
});

ReactDOM.render(
　　<UserGist source="http://localhost/testdata.php" />,
　　document.getElementById(‘example‘)
);