react(三）react开发工具的安装和使用谷歌浏览器右侧三点更多工具---扩展程序---谷歌应用商店---搜索r

react开发工具的安装和使用

谷歌浏览器右侧三点更多工具---扩展程序---谷歌应用商店---搜索react --- React Developer Tools

PropTypes 与 DefaultProps

使用propTypes第一步引入propTypes

import PropTypes from 'prop-types'

propTypes指的是外部传过来的prop，类型做一个校验，都可以写在propTypes里面

defaultProps指如果父组件没有向子组件传递这样的信息，可以在defaultProps里面定义这个默认值

// todoItem 
import React, { Component } from "react";
import PropTypes from 'prop-types'
class TodoItem extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        const { content } = this.props
        return (<div onClick={this.handleClick}>{content}</div>)
    }
    handleClick() {
        const { deleteItem, index } = this.props
        deleteItem(index)
    }
}
TodoItem.propTypes = {
    content: PropTypes.string.isRequired, // string类型是从PropTypes包里拿到的
    deleteItem: PropTypes.func,    
    index: PropTypes.number
}
TodoItem.propTypes = {
    content: "填写吧" 
}
export default TodoItem;

Props、state和render函数的关系

当组件的state或者props发生改变的时候，render函数就会重新执行，

当父组件的render函数被运行时，它的子组件的render都会被重新运行一次

虚拟DOM

state数据
JSX模板 JSX并不是一个真实的DOM，JSX先被转化为React.createElement('div', {'id': 'abc'},'123' )然后变成虚拟DOM，最后渲染成真正的DOM
生成虚拟DOM(虚拟DOM就是一个JS对象，用它来描述真实的DOM) 损耗了性能 ["div", {"id": "abc"}, ["span", {}, "123"]]
数据 + 模板的结合，生成真实的DOM来显示
123
state 数据发生变化
数据 + 模板生成新的虚拟DOM，**(极大的提升了性能) ** ["div", {"id": "abc"}, ["span", {}, "456"]]
比较原始虚拟DOM和新的虚拟DOM的区别，找出区别是span中的内容**(极大的提升了性能)**
直接操作DOM，改变span中的内容

优点：

1. 性能得到了提升

2. 它使得跨端得以实现。React Native

虚拟DOM中的diff算法如何比对

setState 是异步的，为了提升react底层的性能，虚拟DOM的比对是同层的比对，第一层之间的虚拟DOM如果一致，再去比对第二层的虚拟DOM，如果第一层的虚拟DOM不一致，那就删除当前节点下的所有DOM,重新生成DOM

React中ref的使用

<ul ref={(ul)=>(this.ul = ul)}>   {this.getTotoItem()}</ul>

handleBtnClick() {
        this.setState((prevState)=>({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''        
}), ()=>{
            console.log(this.ul.querySelectorAll("div").length)
});}