Question

我是ReactJS的新手。我正在构建一个基本应用程序，人们可以在指定的日期范围内每天在两个选项之间进行选择。 It looks like this。我想在以后将复选框的值发送到API。也许100，也许500我不知道会有多少个复选框。

我几次尝试都失败了。当单击复选框时，所有列表将重新呈现。如果有1000个复选框，则重新渲染将花费很多时间，并且浏览器变慢。

我的问题是，是否可以渲染一个复选框？如果没有，我该怎么办？

我正在使用语义UI React，这是我的渲染功能。预先感谢。

render() {
    return (
        <Table>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell></Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice A')}</Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice B')}</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {this.state.datas.map((data, idx) => (
              <Table.Row key={idx}>
                <Table.Cell>
                  {data.date}
                </Table.Cell>
                <Table.Cell>
                  {data.choiceA == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceB == false && data.choiceA == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceB == true && data.choiceA == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
                <Table.Cell>
                  {data.choiceB == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceA == false && data.choiceB == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceA == true && data.choiceB == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
              </Table.Row>
              ))
              }
          </Table.Body>
        </Table>
    );
  }

数据

[
 {'date': '19.03.2017', 'choiceA': False, 'choiceB': False},
 {'date': '20.03.2017', 'choiceA': True, 'choiceB': False},
 ...
]

Answer 1

我认为使用语义ui组件中的checked道具可能会更好：

https://react.semantic-ui.com/modules/checkbox/

我将简化代码并呈现如下复选框：

<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceA} readOnly/>
</Table.Cell>
<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceB} readOnly/>
</Table.Cell>

我怀疑所有这些条件语句正在/正在引起性能问题。

Answer 2

我只使用React一年，但是据我了解，React's virtual DOM应该只查看已更改的组件并将更改呈现到DOM中。

您是否在处理程序中使用event.preventDefault（）？

多复选框渲染

2 个答案: