小编Sak*_*oor的帖子

嗨，我正在尝试访问组件中的多个上下文，但是我仅从提供者那里获得了一个上下文值就获得了成功。有两个提供者ListContext和`MappingContext。我如何访问这样的上下文：

class TableData extends React.Component {
 static contextType = ListContext;
 static contextType = MappingContext;

 componentDidMount() {
   const data = this.context // it will have only one context from ListContext
  }

我知道我可以在render（）中使用多个提供程序，但我想访问上面的上下文。任何帮助将不胜感激。

谢谢

以下两个示例显然导致完全相同的代码.

示例1(React child):

const Child = ({ item: { startedAt, count } }) => (
  <div>
    <div>{startedAt}</div>
    <div>{count}</div>
  </div>
)

const Parent = items => {
  return (
    <div>
      {items.map((item, index) => (
        <Child key={item.id} item={item} />
      ))}
    </div>
  )
}

export default Parent

例2(函数子):

const child = ({ id, startedAt, count }) => (
  <div key={id}>
    <div>{startedAt}</div>
    <div>{count}</div>
  </div>
)

const Parent = items => {
  return <div>{items.map(child)}</div>
}

export default Parent

为什么选择示例1,即React组件？功能示例有什么好处吗？

我一直在使用React v16的新生命周期。当我们仅比较单个键时，它的效果很好。但是，当要比较大型数据结构（如对象数组）时，深度比较将变得非常昂贵。

我有这样的用例，其中我有一个数组ob对象存储在redux中，

const readings =[
{
id: ...,
name: ...',
unit:...,
value: ...,
timestamp: ...,
active: true,
 },
 ...
]

每当任何对象的活动状态发生变化时，我都会调度一个操作，以将所有与该化简器连接的组件的redux状态更新为相同。

class Readings extends Component {
  state = {
    readings:[],
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if ( // comparsion of readings array with prevState) {
      return {
        readings: nextProps.readings,
      };
    }
    return null;
  }

  componentDidUpdate(prevProps) {
    if ( // comparsion of readings array with prevState) {
      // perform an operation here to manipulate new props and setState to re …