React 学习之 State

React 里面的 State 相当于 Vue 中的 Data，即内部数据。

接下来介绍 State 在 React 的函数组件和类组件这两类组件中的使用。

在类组件中添加 State

• 类组件用 this.state 读，用 this.setState 写 举个栗子：写一个 n+1 的 demo

class App extends React.Component {
  constructor() {
    super();
    this.state = { n: 0 };	// 初始化
  }
  add() {
   this.setState({ n: this.state.n + 1 });	// 写
  }
  render() {
    return (
      <div className="App">
        n:{this.state.n}		// 读
        <button onClick={() => this.add()}>+1</button>
      </div>
    );
  }
}

有一个疑问？为什么不直接使用 this.state.n += 1;

• React 并不像 Vue 对数据有一个监听机制。
• 因此 n 变化 React 并不知道，UI 也不会自动更新。
• React 提供了 setState 来触发 UI 更新。 那换一种写法也行:

this.state.n += 1; 
this.setState(this.state);

不推荐使用 this.setState(this.state);

• React 希望不要把对象局部改变，即不要修改旧对象。即不可变数据。函数式理念
• 写的操作会产生新对象代替
• 常用：this.setState({ n: this.state.n + 1 });

setState 会异步更新 UI

• setSate 之后 ，state 不会立即改变，立马读 state 会失败
• 因此在复杂情况下推荐使用 setState(函数) 用 log 验证：

add() {
   this.setState({ n: this.state.n + 1 });
    console.log(this.state.n);
  }

// 使用函数
add() {
   this.setState((state) => {
      const n = state.n + 1;
      console.log(n);
      return { n };
    });
  }

在函数组件中添加 State

• 函数组件用 useState 返回数组，第一项读，第二项写
• 函数组件通过 setX(新值) 来更新 UI

 const array  = React.useState(0)
 const n = array[0]
 const setN = array[1]
 
 // 析构语法代替上面三句
const [n, setN] = React.useState(0);

表示声明一个初始值为 0 的 array ,用 n 代表 第一个数, setN 可将 n 进行修改代表第二个数。

举个栗子：写一个 n+1 的 demo

function App() {
  const [n, setN] = React.useState(0);	//初始化
  return (
    <div className="App">
      n : {n}		// 读
      <button onClick={
      () => setN(n + 1)}	// 写
      >+1</button>	
    </div>
  );
}

State 在两种组件中使用的区别

• 函数组件没有用 this,一律用参数和变量，书写更方便
• 两类组件都要通过 set 获取新值来更新 UI

另外：通过 State 在 React 中的使用，我们可以思考 Vue 和 React 的编程模型

Vue 的编程模型

• 一个对象对应一个虚拟 DOM
• 当对象的属性改变时，把属性相关的 DOM 节点全部更新

React 的编程模型

• 一个对象对应一个虚拟 DOM
• 一个新产生的对象对应一个新产生的虚拟 DOM
• 对比两个虚拟 DOM，通过 DOM diff 算法 找出不同点，
• 再局部更新 DOM