不直接操纵 DOM => React 是声明式的

如何更新组件 view : In React, a view is updated by re-rendering the component. React calls the component function again
简单理解： 渲染组件 => 创建一个新的组件替换原来的组件
State is preserved throughout re-renders
状态被重置，当组件完全从 UI 中消失，这个叫做取消挂载 卸载 unmounting
当 state 更新的时候会触发 re-render 所以当想更新 view 直接更新 state
React reacts to state changes by re-rendering the UI

1
const [state, setState] = useState;

React dev tools build react component tree… props,hooks,rendered by,可以任意调试状态

How react work behind the scenes

组件： 是一段 UI 的描述，是一个函数返回 React elements，理解为一个模板
组件实例：当我们使用 components 时候创建的实例，是 component 的实际表现，有自己的生命周期(born,live,die)
元素：每一个 组件实例 都会返回一个或多个 React.element
ex: JSX ——-convert——> React.createElement() function calls
A React element is the result of these function calls
React element 是包含所有要创建一个 DOM 元素的必要信息的一种 JS 对象 不直接和 DOM 操作 和 DOM 无关，只是最终为了创建 DOM 的对象
React element => DOM element 最终的视觉效果