react基础05-setState的两种方式以及回调函数、路由组件懒加载、hooks、Fragment、context、shouldComponentUpdate和PureComponent进行组件优化、children props和render props、错误边界、react组件通信总结
setState()
1、setState有两种写法
第一种：对象形式
this.setState({ count: count + 1 }, () => console.log(this.state.count))
第二种：函数形式，返回一个对象。函数的第一个参数是state，第二个参数是props
this.setState( (state, props) => ({ count: state.count + 1 }), () => console.log(this.state.count) )
2、setState还有第二个参数，callback，是一个回调函数，可选，它在状态更新完后、视图也更新（render）完后才被调用
如果需要在setState执行后获取最新的状态，就在callback中获取，有点像this.$nextTick()
路由组件懒加载
1、通过lazy方法和import动态加载路由组件
2、通过<Suspense></Suspense>指定在加载得到路由打包文件前显示一个loading界面
import React, { Component, lazy, Suspense } from 'react'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import Loading from './Loading'
// import About from './About'
// import Home from './Home'
// import Home1 from './Home1'
const About = lazy(() => import('./About'))
const Home = lazy(() => import('./Home'))
const Home1 = lazy(() => import('./Home1'))
export default class LazyLoad extends Component {
render() {
return (
<>
<NavLink to="/about" tag="p">
About
</NavLink>
<NavLink to="/home">Home</NavLink>
<Suspense fallback={<Loading />}>
<Switch>
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Route path="/home" component={Home1} />
</Switch>
<Redirect from="/" to="/about" />
</Suspense>
<style>
{`
.active {
background-color: greenyellow;
}
`}
</style>
</>
)
}
}
Hooks
Hook是react16.8.0新增的语法，可以在函数式组件中使用state及其他的react特性
三个常用的hook
1、useState
const [count, setCount] = useState(0)
第一次初始化指定的值会在内部做缓存
setCount有两种写法：
setCount(count + 1) // 或 setCount(count => count + 1)
2、useEffect
useEffect(() => { const timer = setInterval(() => { setCount(count => count + 1) }, 1000) // 返回的函数相当于componentWillUnmount钩子，组件卸载前执行，在这里清除定时器、取消订阅等 return () => { clearInterval(timer) } }, [])
（1）第一个参数：回调函数，可以执行ajax请求，开启定时器等操作
（2）第二个参数：
第一种情况：不传参，执行1+n次，初始化调用一次，监听所有的state，有任何一个发生改变，都会再次执行一次（有点像render（1+n）；也有人说像componentDidUpdate，但是这个钩子初始化不执行，状态发生变化时才会执行（n）） 不传参的情况在实际开发中较少见，要么传个[]，要么传个数组里面监听状态
第二种情况：传 []，不监测任何状态，回调函数只会在第一次render后执行，相当于componentDidMount钩子，可以在这里进行ajax请求、开启定时器、订阅消息
第三种情况：传 [count, name]，初始化执行一次，并且监听count和name的状态，如果发生改变，执行回调函数（有点像vue中的computed）
（3）返回值：返回一个函数，该函数相当于componentWillUnmount钩子，组件卸载前执行，在这里清除定时器、取消订阅等
3、useRef
const inputRef = useRef() return ( <div> <input type="text" ref={inputRef} /><button onClick={() => console.log(inputRef.current.value)}> 点击打印input框内容 </button> <button onClick={() => (inputRef.current.value = '123')}> 设置input框内容 </button> </div> )
Ref Hook可以在函数式组件中存储/查找组件内的标签或其他数据。功能和类式组件中的createRef()一样
Fragment标签
<Fragment key={1}></Fragment>和<></> 都是不渲染出真实的根标签，减少一层dom结构，为了满足jsx的语法规范
Fragment标签只能接收一个参数key，如果当前组件不参与遍历，使用空标签即可，如果参与遍历，可以使用Fragment标签，传入key值
context
概念：
用于【祖组件】和【后代组件】间通信，类似于vue中的provide / inject
实际开发中一般不用context，使用react-redux中的Provider组件，在入口文件中将App组件包裹起来可以将state传到每个组件中
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.querySelector('#root') )
使用：
1、通过Provider的value属性传递数据
2、类组件可以通过static关键字声明接收context，也可以通过Consumer组件获取context
3、函数式组件可以通过useContext钩子接收context，也可以通过Consumer组件去获取context
import React, { Component } from 'react'
const Context = React.createContext()
const { Provider, Consumer } = Context
export default class A extends Component {
state = { name: '小明', age: 18 }
render() {
const { name, age } = this.state
return (
<div className="box a">
<h2>A组件</h2>
<p>用户名：{name}</p>
{/* 1、通过Provider包裹子组件，子组件及子组件中的组件都具有context */}
<Provider value={{ name, age }}>
<B />
</Provider>
<style>
{`
.box{padding:8px;}
.a {background-color: greenyellow;}
.b {background-color: yellowgreen;}
.c {background-color: deeppink;}
.d {background-color: pink;}
`}
</style>
</div>
)
}
}
class B extends Component {
render() {
return (
<div className="box b">
<h3>B组件</h3>
<C />
</div>
)
}
}
class C extends Component {
static contextType = Context // 2、类式组件的context中如果需要有值，必须写上context声明
render() {
return (
<div className="box c">
<h4>C组件</h4>
<p>类式组件接收用户名（第一种方式）：{this.context.name}</p>
<p>
<Consumer>
{({ name }) => `类式组件接收用户名（第二种方式）：${name}`}
</Consumer>
</p>
<D />
</div>
)
}
}
function D() {
return (
<div className="d">
<h5>D组件</h5>
<p>
{/* 3、函数式通过Consumer组件来获取context */}
<Consumer>{({ name }) => `函数式组件接收用户名：${name}`}</Consumer>
</p>
</div>
)
}
效果：
组件优化（解决render无效调用）
Component的2个问题：
1、只要执行setState()，即使不改变数据，组件也会重新render，导致效率低
2、只要当前组件重新render，就会触发子组件重新render，即使子组件中没有使用父组件的任何数据，这也会导致效率低
期望的做法：
只有当组件的state或props发生变化时才调用render
原因：
shouldComponentUpdate钩子默认返回true，这导致this.setState({})会调用render函数，但是这啥也没改，调用render就是浪费性能
解决：
第一种：
// 重写shouldComponentUpdate钩子，比较新旧state或props，有变化返回true，没有返回false。这样写的好处：this.setState({})将不会触发render shouldComponentUpdate(nextProps, nextState) { // 该钩子是在render前调用的，但是可以拿到render后的props和state，所以参数名叫nextProps、nextState return this.state.count !== nextState.count }
缺点：当state和props是多个时，需要写的判断太多了
第二种：
使用PureComponent替代Component，PureComponent重写了shouldComponentUpdate钩子，只有当state或props数据有变化才会触发render
注意：不要直接对state进行修改，如下代码react不支持
<button onClick={() => { // this.setState({ count: count + 1 }) const state1 = this.state // 浅复制会导致 // const state1 = JSON.parse(JSON.stringify(this.state)) state1.count += 1 this.setState(state1) }} > 点击+1 </button>
为什么：这里要求回调函数是一个纯函数。如果对this.state进行深复制就可以这么用，新对象和state间就没有关系了
特别注意纯函数中容易踩得坑：使用数组的push、unshift、splice等方法，这都是直接改变数组的，然后this.setState(arr)，这不是改了原来的state了么
render props
如何将组件标签中的内容展示出来？
vue：vue插槽
react：
第一种：children props（标签中的内容是一个特殊的标签属性（props传参方式就是写标签属性），属性名叫children） 缺点：如果B组件需要A组件内的数据，做不到
import React, { PureComponent } from 'react'
import SetState from '../01setState'
export default class index extends PureComponent {
render() {
return (
<>
<h2>父组件</h2><A>
<B name={'props小明'} />
</A>
</>
)
}
}
class A extends PureComponent {
state = { name: '小明', age: 18 }
render() {
return (
<>
<h3>A组件</h3>
{this.props.children}</>
)
}
}
class B extends PureComponent {
render() {
return (
<>
<h3>B组件</h3>
<p>接收到props的name：{this.props.name}</p>
</>
)
}
}
第二种：render props（类似vue的slot） A组件中通过标签属性render（可以自由命名，但一般都是命名为render），值是一个函数，返回B组件，函数的参数就是A组件中调用render时传的值。
import React, { PureComponent } from 'react'
import SetState from '../01setState'
export default class index extends PureComponent {
render() {
return (
<>
<h2>父组件</h2>
<A render={values => <B name={values.name} />} /></>
)
}
}
class A extends PureComponent {
state = { name: '小明', age: 18 }
render() {
return (
<>
<h3>A组件</h3>
{this.props.render(this.state)}
</>
)
}
}
class B extends PureComponent {
render() {
return (
<>
<h3>B组件</h3>
<p>接收到A组件的name：{this.props.name}</p>
</>
)
}
}
效果：
错误边界
组件中的子组件和后代组件，一旦发生错误会导致当前组件的渲染被阻塞，错误边界就是让拦截错误的扩散，哪个子组件出错了就展示备用文案或组件，从而不影响到自身的渲染。
在当前组件中使用getDerivedStateFromError生命周期拦截错误，并且只能捕获子组件/后代组件生命周期（主要是应用于render）产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
state = { hasError: '', name: '小明' }
// 当子组件或后代组件发生错误时触发
static getDerivedStateFromError(err) {
console.log(err)
return { hasError: err } // render之前触发，需要返回一个对象，对state中的hasError重新赋值
}
componentDidCatch(error, info) {
console.log('统计错误，反馈给服务器')
}
render() {
console.log(this)
return (
<>
<h2>Parent组件</h2>
{this.state.hasError ? 'Child组件中有错误' : <Child />}
<h3>名字：{this.state.name}</h3>
</>
)
}
}
组件间通信方式总结
1、props：
children props
render props（相当于children props的升级，类似vue的slot）
2、消息订阅-发布：
pubsub-js、event等
3、集中式管理：
redux、dva等
4、context：
生产者-消费者模式
搭配方式：
父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件：消息订阅-发布、集中式管理、context（多用于插件封装）
x
