事件冒泡的影响，两种hook

1. 多个元素嵌套设有多个点击事件，最下级的元素触发点击事件可能发生冒泡情况。

冒泡：点击子元素的 点击事件， 会同时触发父组件的点击事件；

在多个嵌套元素设置多个点击事件，极有可能发生此类问题！

关于冒泡带来的问题，例如：

// 在一个元素的父级 定义一个点击事件    // 在这个事件中定义一种状态或者是下标，

function Cool(){
    ...
    const [chooseIndex, setChooseIndex] = useState(undefined)
    ...
    
   changeIndex = (item, index) => {  // 父级元素的点击事件
        setChooseIndex(index)  // setChooseIndex改变初始值后  是必定会引发视图更新的！！
    } 
   closeStatus = (item, index) => {        // 子节点的点击事件
       setChooseIndex()    // 默认传空，chooseIndex 便不再等于index，但是visable 却没有关闭
   }                       // 在useEffect 和 reuturn打印发现值还是上一次的，也就是没有被改变
    
{dataList.map( (item, index) => { 
    // ****原因是因为，子元素每次closeStatus时都重新触发了changeIndex事件，因此closeStatus的值怎么都改不过来****
    // **** 阻止事件冒泡即可
    return <Fragment>
        ...
    ...  
       // 当chooseIndex == index 时，会出现两个效果，点击每一个变色；popver单个visable 属性true
    <div classname={cx('list-wrap', {"activeItemClass" : chooseIndex === index})}>
     <Popver
      content = {renderContent()}
     visable={chooseIndex === index}  // 当chooseIndex === index，即成立时，visable为true
     >                                // visable 在不成立，值不存在的情况下为false  例如： item.visable不存在为          false
      <div onClick={(e) => changeIndex(item, index)}></div>
     </Popver>
    </div>
        </Fragment>
})}
   
    renderContent = (item, index) => {
        ...
        ...
        <div 
        onClick = {(e) => {
                e.stopPropagation()// 阻止事件冒泡
                closeStatus()}
         }><div>
    }
}

2 . 补充： useEffect 、useState

useEffect 函数在  函数组件是可以多次定义的，这样的好处是：各放各的，不至于在有的状态和一个开关的值发生变化时，因为空数组传了值而重新调用useEffect 里面请求接口数据的函数，造成多次请求，严重影响页面性能。

// 而定义的  
const [content, setContnet] = useState(0) // 在set后是一定会重新刷新页面的，就像类的this.setSate({})也会重新调用render函数，重新刷新页面。