Reactjs 每次重新渲染组件时，我可以在组件上使用哪个生命周期方法

我正在用reactJS构建一个notes应用程序。我在componentDidMount中为其中一个组件编写了一个函数来执行自动调整大小，但是每当我从App.js文件中呈现组件的新实例时，自动调整大小就不再起作用

这是组件的一部分，但这里关注的是“componentDidMount”。在这里，我编写了一个函数，确保组件中的某个文本区域自动调整大小

import React from 'react'

class Note extends React.Component{
    constructor() {
        super()
        this.state = {}

    }


    componentDidMount() {
        var text = document.querySelector('.textInput');
        text.addEventListener('input', onInput, false);

        function onInput(e) {
            this.style.height = 'auto'
            this.style.height = (this.scrollHeight) + 'px'
        }
    }

这是App.js文件中的render方法。map函数之前的Note组件在DOM中自动调整大小，但每当map函数执行并呈现新的Note组件时，自动调整大小就不再起作用

 render(){
    return (
      <div className="App">

        <div className = 'header'>
          <h2>ReactJS Notes App</h2>
          <button><i className="fas fa-plus-circle" onClick = {this.handleClick}></i></button>
        </div>

        <Note />

        {this.state.notesArr.map((x, key) => (<Note />))}
      </div>
    );
  }

render（）{
返回(
ReactJS Notes应用程序
{this.state.notesArr.map（（x，key）=>（））}
);
}

---

我希望无论何时从映射中渲染注释组件，自动调整大小都会起作用。

您应该使用

refs

访问真实的DOM元素属性-读取

您不需要这些类型的事件处理-读取

事件处理程序通常使用

setState（）

强制组件重新渲染（

render（）

调用）

---

搜索一些react-TODO项目/教程，以避免重新发明轮子和学习react模式。

我认为shoulldComponentUpdate（）将有助于实现这一点，请您更具体一些。提及我的代码中需要这些更改的区域。感谢很多事情，整个

组件都挂载了

f.e.

这个
查询选择器
不适用于多个
实例-先学习基本的反应模式，真的。好的。我很感激