组件已大写字母开头。与html标签做区分。
顶部声明组件、不要做函数包裹。
jsx return的时候页面太长、需要换行。需要用()包裹。
jsx规则:
1、 只能返回一个根结点。用<div></div>包裹。可用<></>代替。
2、标签必须闭合<li></li>
3、class更换为className;style={backgroundColor:'black'}
4、{}一对大括弧里在html里放变量。存放对象就是{{name:'dawei'}}
不要在子组件中更改props。 for虚幻的时候key最好在一开始就填充到数据作为唯一值。也不要想着key动态生成唯一建。这样每次操作都会重新渲染。性能变慢。如果是输入框也会导致输入框失去焦点。
让组件变的存粹： 1、只负责自己的任务 2、输入相同、则输出相同 3、尽量最小单元。
props state context 应该始终将这些输入视为只读、props可以传递函数 、按惯例用on开头。
尽量使用事件驱动、这样和业务相符。数据驱动（副作用）应作为最后的手段、如果可以，请尝试仅通过渲染过程来表达你的逻辑。
事件不要带()。()会调用。不带是绑定。
事件是会传播的。当父子组件都拥有onClick事件时、点击子组件，会先触发子组件的onClick事件、然后再触发父组件的onClick事件。事件处理对象往往会有一个默认参数。event(事件)惯例通常被称为e.可以通过e.stopPropagation()阻止传播。e.preventDefault()阻止浏览器默认事件、往往是onSubmit事件。
单项数据绑定：
const [index, setIndex] = useState(0);
使用： setIndex(index+1)。这是hook。惯例用use开头。
不要过早进行性能优化！
注意项：setIndex(index+1)会在下次渲染页面时才会更新index字段。即使是异步调用！也不会改变。简单来讲、一次函数内的index不会发生改变。是一个快照。如果希望直接改变的话。可以使用箭头函数setIndex(n=>n+1)来直接更改index值。这叫更新函数。会将更新放进一个队列，最后处理这个队列。
const [position, setPosition] = useState({x:0, y:0})在绑定对象时、应默认对象是只读的。不应更改该该对象。可以通过setPosition({x:1, y:1})来替换。可使用{...person, firstName: e.target.value}来覆盖。
Immer库。可以直接更改对象内部。减少对象、数组操作难度。
import {useImmer} from 'use-immer'
updatePerson(draft=>{draft.name = e.target.value})
写业务时、尽量减少变化的部分。变化的部分越多容易产生更多的bug。
用JS写出所有视图的状态、然后通过setStatus去触发对应视图状态。
考虑扁平化放state.嵌套太深 比较难便利。
子组件可以通过直接塞入props参数。无需顾虑是什么类型的。比如isActive = {true}。针对VUE说的。
通过prop来父组件更新子组件内容。通过将事件传递给子组件。子组件操作可以修改父组件的状态 也就试试vue的prop和emit.
对于每个独特的状态。都应该存在且只存在一个指定的组件中作为state。这一原则也被称为拥有“可信单一数据源”。相同数据、应该传递。而不应该复制共享的状态。有点像单例模式。
state并不是存在于组件内。而是存在react内。然后通过组件位置和保存的state关联起来。也因此，同一组件调用多次。里面相同的state也不会互相污染。移除组件时、也会清空该组件的state。相同位置的相同组件会使得state被保留。指的是UI树位置而不是JSX位置。使用key来重置仍旧有效。（vue）
