React memoize props.children 組件

Question

我有一個像下面這樣的表單組件，它不是 Reactstrap，它們是我自己的組件。

<Form onSubmit={handleSubmit} className='with-bg'>
    <Row>
       <Col lg="12">
          <Form.Group>
              <Form.Label required text='Ad Soyad' />
              <Form.Input
                  onChange={(e) =>
                    setUser({...user, fullname: e.target.value})
                  }
                  required={true}
                  value={user.fullname}
                  type="text"
                  placeholder="Kullanıcının adı soyadını giriniz..."
               />
          </Form.Group>
       </Col>
    </Row>
    <Button
       color="danger"
       type="button"
       onClick={() => history.goBack()}
    >Geri <i className="fas fa-backward"></i></Button>
    <Button color="primary" disabled={loading}>
        Kaydet <i className={`fas fa-${loading ? "spinner fa-spin" : "save"}`}></i>
     </Button>
</Form>

我將 React.memo 用於輸入和標簽，例如：

const FormInput = React.memo(({ icon = '', smallText = '', ...otherProps }) => (
  <>
    <input {...otherProps} />
    {icon ? <i className={`fas fa-${icon} input-icon`}></i> : null}
    {smallText ? smallText : ''}
  </>
));

但是在狀態更改時，組件組件和組件它們都再次渲染，因為它們有props.children ，我不知道如何防止它們再次渲染。 我曾嘗試過useMemo，但是當我有很多動態輸入時會發生什么呢？ 或者我想知道<Form.Input>組件是否仍然再次呈現？ 當我查看 React Profiler 時，它不是，但Form.Group組件呈現了嗎？ 所以當它呈現時，它的子(Form.Label and Form.Input)也呈現對嗎？ 我怎樣才能獲得這種頁面的最佳性能？

Answer 1

我有一個像下面這樣的表單組件，它不是 Reactstrap，它們是我自己的組件。

<Form onSubmit={handleSubmit} className='with-bg'>
    <Row>
       <Col lg="12">
          <Form.Group>
              <Form.Label required text='Ad Soyad' />
              <Form.Input
                  onChange={(e) =>
                    setUser({...user, fullname: e.target.value})
                  }
                  required={true}
                  value={user.fullname}
                  type="text"
                  placeholder="Kullanıcının adı soyadını giriniz..."
               />
          </Form.Group>
       </Col>
    </Row>
    <Button
       color="danger"
       type="button"
       onClick={() => history.goBack()}
    >Geri <i className="fas fa-backward"></i></Button>
    <Button color="primary" disabled={loading}>
        Kaydet <i className={`fas fa-${loading ? "spinner fa-spin" : "save"}`}></i>
     </Button>
</Form>

我將 React.memo 用於輸入和標簽，例如：

const FormInput = React.memo(({ icon = '', smallText = '', ...otherProps }) => (
  <>
    <input {...otherProps} />
    {icon ? <i className={`fas fa-${icon} input-icon`}></i> : null}
    {smallText ? smallText : ''}
  </>
));

但是在狀態更改時，組件組件和組件它們都再次渲染，因為它們有props.children ，我不知道如何防止它們再次渲染。 我曾嘗試過useMemo，但是當我有很多動態輸入時會發生什么呢？ 或者我想知道<Form.Input>組件是否仍然再次呈現？ 當我查看 React Profiler 時，它不是，但Form.Group組件呈現了嗎？ 所以當它呈現時，它的子(Form.Label and Form.Input)也呈現對嗎？ 我怎樣才能獲得這種頁面的最佳性能？