携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第30天
一、无状态组件与有状态组件的区别
无状态组件主要用来定义模板,接收来自父组件 props 传递过来的数据,使用{props.xxx}的表达式把 props 塞到模板里面。
有状态组件主要用来定义交互逻辑和业务数据,使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上(有状态组件也可以叫做容器组件,无状态组件也可以叫做展示组件),然后传递 props 到展示组件,展示组件接收到 props,把 props 塞到模板里面。
二、调用 render 时,DOM 一定会更新吗,为什么?
不一定更新,React 组件中存在两类 DOM,render 函数被调用后, React 会根据 props 或者state 重新创建一棵 virtual DOM 树,虽然每一次调用都重新创建,但因为创建是发生在内存中,所以很快不影响性能。而 virtual dom 的更新并不意味着真实 DOM 的更新,React 采用diff 算法将 virtual DOM 和真实 DOM 进行比较,找出需要更新的最小的部分,这时 Real DOM才可能发生修改,所以每次 state 的更改都会使得 render 函数被调用,但是页面 DOM 不一定发生修改。
三、在哪些生命周期中可以修改组件的 state
componentDidMount 和 componentDidUpdate。
constructor、componentWillMount 中 setState 会发生错误:setState 只能在 mounted 或mounting 组件中执行。
componentWillUpdate 中 setState 会导致死循环。
四、connect()前两个参数
1.mapStateToProps(state, ownProps)。
允许我们将 store 中的数据作为 props 绑定到组件中,只要 store 更新了就会调用
mapStateToProps 方法,mapStateToProps 返回的结果必须是 object 对象,该对象中的值将会更新到组件中
2.mapDispatchToProps(dispatch, [ownProps])
允许我们将 action 作为 props 绑定到组件中,如果不传这个参数 redux 会把 dispatch 作为属性注入给组件,可以手动当做 store.dispatch 使用mapDispatchToProps 希望你返回包含对应 action 的 object 对象