react 相关

jsx的本质

描述redux单项数据流

list.slice() push pop splice

Object.assign ...

setStates是同步的还是异步的

setState 可能是异步更新（有可能是同步更新）

setState完，再去拿结果，拿的是当前的结果，不是最新的结果

this.setState({count: this.state.count+1}) 
console.log('count': this.state.count)//异步的，拿不到最新值

setTimeout及自定义的Dom事件中，setState是同步的

setTimeoutz中
setTimeout(() =>{
	this.setState({count：this.state.count+1})
	console.log('setTimeout count': this.state.count) //setState 是同步的
})
自定义的Dom事件中，setState是同步的： 
document.body.addEventListener('click', this.bodyClickHandler)
bodyClickHandler = () =>{
	console.log('document count': this.state.count)
}

setState是否会被合并

1.setState传入对象，可能会被合并 类似于Object.assign

this.setState({count: this.state.count+1}) 
this.setState({count: this.state.count+1}) 
this.setState({count: this.state.count+1})  

三个setState,最后输出1

2.setState传入函数，不会被合并。 prevState 当前的state

this.setState((prevState, props)=> {
	return {count: prevState.count+1}
})

React 生命周期

挂载 constructor render 更新dom和refs componentDidMount 更新 render componentDidUpdate 卸载 componentWillUnMount

函数组件：

纯函数，输入props，输出jsx

没有实例， 没有生命周期，没有state

非受控组件

ref defaultValue defaultChecked 手动操作DOM元素

必须手动操作DOM元素，setState实现不了

使用场景

文件上传

某些富文本编辑器，需要传入DOM元素

开发富文本编辑器

Portals（传送门）使用场景

组件默认会按照既定层次嵌套渲染，如何让组件渲染到父组件以外？

Portals 使用场景，组件写法一样，但是渲染地方不一样

overflow:hidden（父组件设置了BFC）

父组件z-index太小

fixed需要放在body第一层

uc浏览器: position：fixed 元素要放到body上，有更好的浏览器兼容性

ReactDOM.createPortal(

, 渲染到的地方DOM节点document.body)

context

最外层定义的一个主题 语言

公共信息（语言，主题），如何传递给每个组件?

props太复杂，redux太繁琐

函数组件，class组件里面使用不同的消费方式

异步组件

import()

React.lazy

React.Suspense

shouldComponentUpdate 默认返回true，默认渲染所有子组件

默认情况父组件更新，子组件会默认更新，不管子组件是否有变化

shouldComponentUpdate(nextProps, nextState){
    if(nextState.count !== this.state.count){
        return true //可以渲染
    }
    return false //不重复渲染
}

shouldComponentUpdate 一定要每次都用么？ 需要的时候才优化 开发者书写不规范， shouldComponentUpdate配合不可变值（使用setState更改值） 使用