React学习笔记（17） | Tyasrio's blog

React 学习笔记

使用 script 标签写 jsx（xml）时，type 为 text/babel
虚拟 dom 是一个 object 对象，属性比真实的 dom 少
样式类名指定用 className
内联样式使用 style={{}}
只有一个根标签，标签必须闭合
组件的首字母要大写，小写则和 HTML 同名元素匹配
{}里传入 array 会被遍历，object 则不支持，只支持 js 表达式（可以用变量接到 let obj = ?）
函数式组件直接 return，类式组件需要 extends React.Component 并 return
不使用 hooks 的话，只有 class 定义的组件实例才有 3 大属性，function 不行（没有实例对象，props 除外）
添加点击事件推荐在组件上写 onClick={函数名}，取 id 也行
类中的方法开启了局部严格模式，所以在类中调用同类下别的方法时，被调用的方法的 this 为 undefined
为了解决上一条的问题，在构造函数中，我们可以将原型链上的方法重新 bing（this），再赋给实例本身。又或者定义为全局变量（并使用箭头函数改变 this）
必须使用 this.setState()方法更改 state
react 为对象扩展了展开运算符(...)的 iterator，但是只能再组件标签里使用
可以为类组件添加类名.propTypes 的对象可以限制 props（需要额外引入 PropTypes 的包），也可以添加类名.defaultProps 的对象设置默认值，或者再类内部添加 static propTypes/static defaultProps。可适用于函数式组件。使用方法{ PropTypes.${string/number/func}.isRequired}，
props 是只读的，再构造器中 super(props)的目的是为了再构造器自身中 this.props 不为 undefined，可传递给函数式组件中
refs 有 3 中声明方式，字符串（已过时），回调形式（可以指定类中方法回避内联函数被调用两次的问题，但是不用也行），api 创建（推荐）
字符串形式声明的的 ref 有效率问题，最好不要用，回调的可以内联或者类指定，api 创建需要对每一个 ref 都要 createRef
在 react 中的事件处理，1 是为了更好的兼容性重新定义了 onXxx 等事件，2 是为了高效将事件都委托给最外层的元素
在 form 表单中，所有值是现用现取则为非受控表单（ref 现取值），反之为受控表单（即实时更新 state）
如果函数的参数或返回值是一个函数，则称之为高阶函数
挂载时：constructor，componentWillMount，render，componentDidMount 更新时：componentWillReceiveProps（子组件只在第二次接收到新 props 时触发），shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate 代表了 react16 的声明周期钩子/回调函数
forceUpdate 可以跳过 shouldComponentUpdate 的检查
在 react17 以后，will 的 3 个钩子需要加 UNSAFE_的前缀（意味着将要废弃），追加了 getDerivedStateFromProps 和 getSnapshotsBeforeUpdate
getDerivedStateFromProps 这个方法接受 props 和 state 参数，是一个 static 方法，返回 null 或者 state，只有在 state 完全取决于 props 时使用。
getSnapshotsBeforeUpdate 返回一个 snapshot/null 的值，作为 componentDidUpdate 的第三个参数
componentDidUpdate 的参数为 preProps，preState, snapshot
遍历时指定的 key 用于虚拟 dom 的 diff，如果 key 相同比较内容，key 不同直接更新真实 dom，比如在标签中套标签，key 相同了，内容不同，但是子标签没变，导致内容错乱