自习 leetcode+react官方文档学习

上午

leetcode 5道题+1

哈希完结+ 字符串第一题
什么情况下使用：

• 数组：映射空间的大小是有限制的，例如26个小写英文字母
• set：映射空间和实际的使用空间差距较大，用数组就浪费了
• map：存储键值对的情况

下午

学习React官方文档

对state进行保留和重置

1. 相同位置的相同组件的state会保留下来
2. 强制更新state：添加key
3. 不要嵌套定义组件

问题

import { useState } from 'react';
import ContactList from './ContactList.js';
import EditContact from './EditContact.js';

export default function ContactManager() {
  const [
    contacts,
    setContacts
  ] = useState(initialContacts);
  const [
    selectedId,
    setSelectedId
  ] = useState(0);
  const selectedContact = contacts.find(c =>
    c.id === selectedId
  );

  function handleSave(updatedData) {
    const nextContacts = contacts.map(c => {
      if (c.id === updatedData.id) {
        return updatedData;
      } else {
        return c;
      }
    });
    setContacts(nextContacts);
  }

  return (
    <div>
      <ContactList
        contacts={contacts}
        selectedId={selectedId}
        onSelect={id => setSelectedId(id)}
      />
      <hr />
      <EditContact
        key={selectedId}
        initialData={selectedContact}
        onSave={handleSave}
      />
    </div>
  )
}

const initialContacts = [
  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
  { id: 1, name: 'Alice', email: 'alice@mail.com' },
  { id: 2, name: 'Bob', email: 'bob@mail.com' }
];export default function ContactList({
  contacts,
  selectedId,
  onSelect
}) {
  return (
    <section>
      <ul>
        {contacts.map(contact =>
          <li key={contact.id}>
            <button onClick={() => {
              onSelect(contact.id);
            }}>
              {contact.id === selectedId ?
                <b>{contact.name}</b> :
                contact.name
              }
            </button>
          </li>
        )}
      </ul>
    </section>
  );
}

请问这里的selectedContact会随着用户点击不同的ContactList内容，而变化吗?为什么每次 selectedId 更新后，selectedContact 变量会重新计算

每次 selectedId 更新后，selectedContact 变量会重新计算是因为 React 的 组件重新渲染 机制。让我们深入了解一下其中的原理：

1. React 的组件渲染流程:

• React 中，状态 (state) 的变化会触发组件的重新渲染。当 selectedId 使用 setSelectedId 更新时，ContactManager 组件会重新渲染。
• 在重新渲染的过程中，React 会重新执行组件函数 (ContactManager)，这意味着所有在组件函数中的代码都会再次运行，包括 selectedContact 的计算。

2. 重新计算 selectedContact:

const selectedContact = contacts.find(c => c.id === selectedId);

• selectedContact 是通过在 contacts 数组中查找与当前 selectedId 匹配的联系人来计算的。
• 每次 ContactManager 组件重新渲染时，contacts.find(c => c.id === selectedId) 会重新执行，这意味着 selectedContact 的值会根据最新的 selectedId 重新计算。

3. 为什么要重新计算:

• React 的设计理念是基于不变性（immutability），状态更新后不会直接改变现有的变量，而是通过新的状态值生成新的 UI。这意味着每次状态变化时，组件会重新计算与该状态相关的所有内容，以确保 UI 显示的内容是最新的。
• selectedContact 的重新计算是必要的，因为你希望它始终反映当前选中的联系人。如果 selectedId 发生变化，但 selectedContact 不重新计算，那么 EditContact 组件可能会显示错误的联系人信息。

4. 总结:

• 每次 selectedId 更新时，React 会触发 ContactManager 组件的重新渲染。
• 在重新渲染过程中，selectedContact 会基于最新的 selectedId 重新计算，以确保 selectedContact 始终表示当前选中的联系人。