React Docs（1）

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>
  );
}

在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，后面会设置定时器。

React Docs（1）

原文：https://www.cnblogs.com/lijianming180/p/12262537.html