React Docs（1）

安装

React在codepen上提供了一个Hello，World项目事例，只需打开网站，即可尝试React。
另外还提供了一个html文件的Hello，World项目，项目中引用CDN的react.js、react-dom.js以及用于编译babel的babel.min.js，运行比较缓慢，只适合学习语法使用。

创建单页面应用

创建React应用的最好方法是单页面应用，这里是最好方法，也是可以创建多页面应用的。可以通过官方方法去创建你的应用：

1
2
3
4
npm install -g create-react-app
create-create-app hello-world
cd hello-world
npm start

这里不涉及任何后端逻辑和数据库，可以使用任何你想用的后端。create-react-app中使用了Webpack，Babel和ESLint，但是你可以自己去配置他们。

将React加入一个现有的应用

使用npm install --save react react-dom安装React。
将其导入你的代码中，如：

1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
)

这段代码应该被包含在一个拥有id为root的HTML元素，所以你的HTML文件需要<div id="root"></div>
当你使用上面方法使用React的时候，需要使用预设为es2015和react的Babel进行转化代码。使用React在生产环境的时候，设置NODE_ENV为”production”。

使用ES6和JSX

建议是用Babel将你的ES6和JSX代码转换为JavaScript代码，Babel可以有很多不同的配置，但是确保里面包含babel-preset-react和babel-preset-es2015。

使用CDN

如果不想使用npm，可以使用CDN

1
2
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

@后面数字可以指定版本

1
2
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

JSX

在JSX中，可以在任意地方插入JavaScript代码，只需要将JavaScript放在大括号中即可。下面的代码都是合法的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function (user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

将JSX代码放在小括号中，像HTML代码一样换行，可以方便阅读。

JSX也是表达式

JSX最后也被编译成JavaScript代码，这就以为着JSX可以赋值给一个JavaScript变量，可以作为方法的参数，可以被方法返回。

JSX添加HTML属性

可以用字符串设置属性，也可以通过使用{}将JavaScript表达式赋值给属性。

闭合JSX

如果JSX是空的可以使用/>来闭合标签，如果包含其他标签，也可以使用</***>闭合。
虽然JSX很接近HTML，但是还是有些不同，比如属性使用小驼峰法命名，class使用className，for使用forHtml等。

JSX防止注入攻击

默认情况下，React DOM在渲染JSX之前会对其进行编码。

JSX描述对象

Babel会将JSX转化为React.createElement()形式，比如下面这样：

1
2
3
4
5
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

转化为

1
2
3
4
5
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement会对你的代码进行一些检查，但是本质上就是将其转化成一个对象：

1
2
3
4
5
6
7
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
}

组件

将你的页面分成一个个组件，每个组件都是独立的、可以重复使用的。组件就像JavaScript中的方法，可以接受一些输入参数，返回React元素

Funtional 和 Class 组件

定义组件最简单的方式是使用JavaScript方法：

1
2
3
4
5
6
7
8
9
10
11
12
function Welcome (props) {
  return <h1>Hello, {props.name}</h1>
}
这个方法就是个有效的React组件，因为它接受props作为参数，并且返回了一个React元素。

另外也可以使用ES6中的类(class)来定义组件：
```javascript
class Welcome extends React.Component {
  render () {
    return <h1>Hello, {this.props.name}</h1>
  }
}

上面两种定义组件的方法是等价的。
但是Class组件能够添加一些额外的功能，我们将在下面讨论。在不需要这些额外的方法，可以使用Functional组件。

渲染组件

渲染如下：

1
2
3
4
5
6
7
8
9
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

过程：

  1. 调用ReactDOM.render()方法，参数为自定义组件。
  2. React调用组件Welcome，传递{name="Sara"}作为参数。
  3. Welcome组件返回<h1>Hello, Sara</h1>。
  4. React将<h1>Hello, Sara</h1>更新到页面。
组件组合

组件可以任意组合。
通常情况，React应用中在最顶端是一个App组件。组件必须有一个根元素，也就是所有元素都得包裹起来。

提取组件

不要担心组件被拆分的太小。下面是一个对组件进行拆分的例子。
Comment组件： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
大专栏  React Docs（1）re>

在Comment组件中，使用了author (object)，text (string)，date (date)来描述这个对象。这样的组件因为组合的原因是很难复用的。

第一步，提取出一个Avatar组件：

1
2
3
4
5
6
7
8
function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

这里的Avatar组件我们系统他更通用，所以说用了user而不是author。 根据组件去命名参数，而不是根据使用上下文。

下一步是提取UserInfo组件，这里使用了上面提取的Avatar组件：

1
2
3
4
5
6
7
8
9
10
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

这样，我们的Comment组件就成了下面的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
Props是只读的

无论是Funcional还是Class组件，都是不能够修改props的。

1
2
3
4
5
6
7
8

function sum(a, b) {
  return a + b;
}
// 下面这个不是纯函数，因为他改变了输入的值
function withdraw(account, amount) {
  account.total -= amount;
}

通过官方这个例子，可以明白纯函数有两点，一是相同的输入就会有相同的输出，第二点是不会更改输入的参数。

所有的React组件对于props参数必须像纯函数一样，也就是不会试图去修改props，并且对于相同的props会有相同的输出。
当然，React也提供了随时间动态变化组件的方法，state允许根据用户行为、网络反馈等改变React组件的输出形式，这并不违背React纯函数原则。

state 和 生命周期

请看下面一段代码：

1
2
3
4
5
6
7
8
9
10
const Clock = (
  <div>
    <h1>Hello, world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

这段代码只能够显示一个Hello,world!与一个生成页面的时间。如果想要时间不停的更新，就需要使用setInterval()不停的去执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 这样
function tick() {
  const Clock = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    <Clock />,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

// 或者这样
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

// 但是下面这种就是不可行的，原因在于Clock组件定义被转化成了一个对象，在之后没有发生过变化。
const Clock = (
  <div>
    <h1>Hello, world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);
setInterval(
function(){
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
)}, 1000)

这样的代码的问题在于时间的变化应该是Clock组件的行为，而不应该定义在全局。
state可以帮助我们解决这个问题，state与props类似，但是更私有且被组件所控制，而不是传递过来的。

将Functional组件转换为Class组件

Functional组件是无状态组件，不能使用state，所以首先需要将Functional转化为Class组件：

  1. 创建一个和Functional组件名相同的ES6 class继承React.Component
  2. 添加空的方法render()
  3. 将Functional组件中的函数主体移动render()方法中
  4. 将render()中的props替换成this.props
  5. 删除原来的Functional组件声明
    Class组件不仅可以使用state还可以使用生命周期函数。
    拿上面的Clock组件作为事例，经过上面的转换，现在的Clock组件应该是这个样子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
为Class组件添加本地state

还是上面的Clock组件：

  1. 将render()中的this.props替换成this.state
  2. 添加class构造函数(constructor)初始化this.state (Class组件总是应该将props传递给父类)
  3. 移除date从组件调用的props中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    class Clock extends React.Component {
      // 这里是步骤2
      constructor(props) {
        // 将props传递给父类
        super(props);
        this.state = {date: new Date()};
      }

      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    );

这样只是初始化了state，后面会设置定时器。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lijianming180/p/12262537.html