### 彪哥

爱好前端

- 核心概念

  - JSX简介
  - 元素渲染
  - 组件&Props
  - State&生命周期
  - 事件处理
  - 条件渲染
  - 列表&Key
  - 表单
  - 状态提升 (共享状态)
  - 组合vs继承
  - React哲学

- 高级指引

- Hook

- 案例演示

- 《React》笔记
- 核心概念

heBody
2021-03-26
目录

# 状态提升 (共享状态)

# # 09. 状态提升 (共享状态)

通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”

两个输入框共享数据的例子：

    const scaleNames = {
      c: '摄氏度',
      f: '华氏度'
    };

    // 转摄氏度
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }

    // 转华氏度
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }

    // 转换，为空时返回空，否则返回保留三位小数的浮点数
    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      // Math.round返回一个数字四舍五入后的整数
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    // 水是否会沸腾
    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>水会沸腾.</p>;
      }
      return <p>水不会沸腾.</p>;
    }

    // 子组件 - 输入框
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props); // 接收父组件传入props
        this.handleChange = this.handleChange.bind(this); // 绑定回调函数，并修正this
      }

      // 处理change
      handleChange(e) {
        // e是合成事件对象，通过e.target.value 取值
        // 调用父组件传入的onTemperatureChange函数，并传值
        this.props.onTemperatureChange(e.target.value);

        // 当子组件输入框值改变时调用父组件的onTemperatureChange方法，并传出值。
        // 另外，onTemperatureChange命名方式：`在<子组件>变更`
      }

      render() {
        // 接收父组件传入的温度值
        const temperature = this.props.temperature;
        // 接收父组件传入的衡量方式
        const scale = this.props.scale;

        return (
          <fieldset>
            <legend>输入温度-{scaleNames[scale]}:</legend>
            <input value={temperature}
                   onChange={this.handleChange} />
          </fieldset>
        );
      }
    }

    // 父组件 - 计算器
    class Calculator extends React.Component {
      constructor(props) {
        super(props); // 接收父组件传入props

        // 绑定事件回调，并修正this
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        // 创建初始状态值
        this.state = {temperature: '', scale: 'c'};
      }

      // 处理`摄氏度`变更
      handleCelsiusChange(temperature) {
        // temperature接收到子组件传来的参数，并通过setState修改状态
        this.setState({scale: 'c', temperature});
      }

      // 处理`华氏度`变更
      handleFahrenheitChange(temperature) {
        // temperature接收到子组件传来的参数，并通过setState修改状态
        this.setState({scale: 'f', temperature});
      }

      // 渲染函数（每当state改变都会调用）
      render() {
        // 取得当前state下的值
        const scale = this.state.scale;
        const temperature = this.state.temperature;

        // 根据scale值取得相应的温度数据
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

        // 返回渲染的元素
        // 插入子组件TemperatureInput传入相应的参数，onTemperatureChange指定为当前组件的回调函数
        return (
          <div>
            <TemperatureInput
              scale="c"
              temperature={celsius}
              onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
              scale="f"
              temperature={fahrenheit}
              onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict
              celsius={parseFloat(celsius)} />
          </div>
        );
      }
    }

    // 渲染DOM
    ReactDOM.render(
      <Calculator />,
      document.getElementById('root')
    );

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

在 CodePen 上尝试
(opens new window)

笔记

1. 父组件给所有子组件传入state的值
2. 子组件修改值时调用父组件的方法并把值传出
3. 父组件接收到值之后修改state
4. state被修改之后重新执行render函数，并回到第1步

### # 小结

- 任何可变数据应当只有一个相对应的唯一“数据源”

  - 通常，state 都是首先添加到需要渲染数据的组件中去
  - 然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中
  - 你应当依靠自上而下的数据流
    (opens new window)，而不是尝试在不同组件间同步 state。

- “存在”于组件中的任何 state，仅有组件自己能够修改它

- 如果某些数据可以由 props 或 state 推导得出，那么它就不应该存在于 state 中。（如上例中，经过tryConvert方法转换的后的值。）

### # React开发者工具（debug）

当你在 UI 中发现错误时，可以使用 React 开发者工具
(opens new window) 来检查问题组件的 props，并且按照组件树结构逐级向上搜寻，直到定位到负责更新 state 的那个组件。

编辑
(opens new window)
#React
上次更新: 2022/12/14, 19:36:42
表单
组合vs继承

← 表单 组合vs继承→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式