03-react-开发调试工具、 props、state与render、虚拟dom

propsTypes限制父组件传递给子组件的数据类型

import PropTypes from 'prop-types'
// 父组件传递给子组件的类型做类型校验
// 加上isRequired说明这个值必须有，如果没有传递会报错，阻止报错的话可以使用下面的defaultprops
TodoItem.propTypes = {
  test: PropTypes.string.isRequired,
  content: PropTypes.string,
  handleItemDelete: PropTypes.func,
  index: PropTypes.number
}
TodoItem.defaultProps = {
  test: 'hello-world'
}

官方上面的propsTypes链接：https://react.docschina.org/docs/typechecking-with-proptypes.html

props、state与render函数

解决疑问？为何修改数据后，页面上数据就会修改？

• 当组件中的props和state修改后，组件的render函数就会重新执行
• 当父组件的render被执行时，子组件的render也会被运行

react中的虚拟dom

每次数据发生变化时，用js生成一个虚拟dom对象，即js对象，比用js生成一个dom对象，性能提升很多。

每次数据变化时，就会新旧虚拟dom对象进行比较，然后替换修改的部分

虚拟dom中的diff算法

数据改变后，新旧虚拟dom比对的方法称之为diff算法

调用setState之后，state改变，就会触发diff算法

setState里面传入函数，可以异步，提高性能。短时间内重复修改同一个变量，react会将改变合并，来提高性能