justjavac / react-pits

React 中的坑

react-pits

React 中的坑 https://github.com/justjavac/react-pits/issues

React 技术交流群: 342685917

react-pits's Issues

React 中 setState() 是异步的

0x00

React has a setState() problem: Asking newbies to use setState() is a recipe for headaches. Advanced users have secret cures.

为了性能和其它原因，setState 这个 API 很容易被误用。

• setState 不会立刻改变 React 组件中 state 的值
• setState 通过引发一次组件的更新过程来引发重新绘制
• 多次 setState 函数调用产生的效果会合并

0x01

问题

看如下代码：

// state.count 当前为 0
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
this.setState({count: state.count + 1});
// state.count 现在是 1，而不是 3 

三次操作被合并为了一次。

0x02

解决方式

this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}));

参考资料

• setState() Gate
• 关于 React 中的 setState 这个API
• setState：这个API设计到底怎么样

SyntheticEvent objects are pooled

0x00

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

在 React 事件处理中，事件对象被包装在一个 SyntheticEvent（合成事件）对象中。这些对象是被池化的（pooled），这意味着在事件处理程序会把这些对象重用于其他事件以提高性能。随之而来的问题就是，异步访问事件对象的属性是不可能的，因为事件的属性由于重用而被重置（nullified）。

0x01

下面代码存在问题：

function handleClick(event) {
  setTimeout(function () {
    console.log(event.target.name);
  }, 1000);
}

控制台会输出 null，因为每次事件回调完成后，SyntheticEvent 会被重置。

解决方式是把 event 赋值到一个内部变量上。

function handleClick(event) {
  let name = event.target.name;    // 内部变量保存 event.target.name 的值
  setTimeout(function () {
    console.log(name);
  }, 1000);
}

0x02

facebook 官方的实例：

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

如果想异步访问事件属性，可以在事件上调用 event.persist()，这会从池中移除合成事件并允许对事件的引用被保留。

参考资料

• SyntheticEvent - React