到添加交互的环节了，教会我怎么样添加事件和设置state，以及state和页面渲染的关系，需要真正理解下面的摘抄：
- 事件处理函数通常在组件内部定义，名称一般以handle开头，后跟事件名称。
- 必须传递事件处理函数，而非函数调用！onClick={handleClick}，不是onClick={handleClick()}。
- 可以在父组件中定义一个事件处理函数，并将其作为prop传递给子组件。
- 事件会向上传播。通过事件的第一个参数调用e.stopPropagation()来防止这种情况。
- 当一个组件需要在多次渲染间“记住”某些信息时使用state变量，State变量是通过调用useState Hook来声明的。
- Hook可能会让我们想起import：它们需要在非条件语句中调用。调用Hook时，包括useState，仅在组件或另一个Hook的顶层被调用才有效。
- state完全私有于声明它的组件。父组件无法更改它。这使你可以向任何组件添加或删除state，而不会影响其他组件。
- State是组件私有的。如果你在两个地方渲染它，则每个副本都有独属于自己的state。
- 一个state变量的值永远不会在一次渲染的内部发生变化，即使其事件处理函数的代码是异步的。
- 设置state不会更改现有渲染中的变量，但会请求一次新的渲染。
- 我们应该把所有存放在state中的JavaScript对象都视为只读的。
- 当我们在state中存放对象时，直接修改对象并不会触发重渲染，并会改变前一次渲染“快照”中 state 的值，所以不要直接修改一个对象，而要为它创建一个新版本，并通过把state设置成这个新版本来触发重新渲染。
- 我们可以使用这样的 {…obj, something: ‘newValue’} 对象展开语法来创建对象的拷贝。
- 我们可以可以使用filter()和map()来创建一个经过过滤或者变换的数组。
- 你可以使用 Immer 来保持代码简洁。
加油，虽然是摘抄，但还是有一定意义的，最起码自己又复习一遍重点，每句也都能理解。