Javascript 如何在ReactJS中更改单个组件的状态而不重新呈现整个组件？

我是ReactJS新手，我有一个问题，关于如何更改映射函数中实例化的特定组件的状态。 假设我有一个名为panels的简单组件，在我的内部有N个panel item，panel item只是一个单独的组件，在panels内部实例化了N次Map函数。大概是这样的：

class Panels extends React.Component {

constructor(props) {
    super();
   
    this.state = {
       panelItems: [ 
        { id: '1', text: 'A' },
        { id: '2', text: 'B' },
        { id: '3', text: 'C' },
       ]
    };
}

render() {
    return (
      <div>
          {this.state.panelItems.map(item => (
              <PanelItems key={item.id}>{item.text}</PanelItems>
          ))}
      </div>
    )
}

}

export default Panels;

类面板扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
小组项目：[
{id:'1'，text:'A'}，
{id:'2'，text:'B'}，
{id:'3'，text:'C'}，
]
};
}
render（）{
返回(
{this.state.panelItems.map（项=>(
{item.text}
))}
)
}
}
导出默认面板；

现在我有一些问题：

假设我想要一个按钮，可以将面板项1的状态（精确地说是文本）更改为D，我如何才能做到这一点

如果我回答了问题1，它是否会重新呈现整个面板组件（包括面板项目2和3）

如果是，如何仅重新渲染组件面板项目1而不渲染 是否为每个面板项目创建单独的组件？因为他们使用 同样的结构，只有里面的数据会改变

多谢各位

…更改面板项目1的状态（精确地说是文本）的按钮

创建在更改中拼接的函数：

const updateText = (index, text) => {
  // get the existing panel items from state.
  // we don't want to mutate the original so we make a copy using spread syntax
  const panelItems = [...this.state.panelItems];

  panelItems.splice(
    index, // starting at item "index"
    1, // delete one item from the array
    { ...panelItems[index], text } // and insert its replacement
);

  this.setState({ panelItems }); // set state with the new array
}

然后单击按钮调用该函数：

<button onClick={() => updateText(0, 'the new text')}>Update Item 0</Button>

只要项目道具是同一个对象，它就不应该重新渲染，即使父状态发生更改

{this.state.panelItems.map(item => (
  <Items key={item.id} item={item} />
))}

const Item => ({item}) => <PanelItem>{item.text}</PanelItem>