// 上面find的写法性能会更高些,因为$是由右至左查找元素
$('#test').find('img')
$('#test img')
React原理
- 虚拟DOM
- 生命周期
- setState
组件更新的三种方式:
- setState: setState更新后依次执行(shouldComponentUpdate-> componentWillUpdate -> render() -> componentDidUpdate
- 父组件render:组件内部没有发生变化,但外部发生了变化,注意redux,props等的使用
- foreUpdate: 强制render,依次执行componentWillUpdate()-> render->componentDidUpdate
Redux原理
React+Redux常见性能优化策略
性能优化分为:
- react本身的性能优化(组件内部的性能优化,组件之间的性能优化,服务端性能优化:首屏加载快,运行速度快,路由懒加载)
- redux性能优化
Context
context是全局的,组件里声明,所有子元素可以直接获取
import React from 'react'
import PropTypes from 'prop-types'
// 顶级父组件
class Page extends React.Component {
// 设置context时props是强类型的,需要在祖先组件和使用的子组件中对props做类型设置
static childContextTypes = {
user: PropTypes.String
}
constructor(props) {
super(props)
this.state = {user: 'lmh'}
}
// 在最顶级的父组件中设置context,其下面的所有的子组件都可以使用此属性
getChildContext() {
return this.state
}
render() {
const user = 'lmh'
return (
<div>
<p>I am {this.state.user}</p>
<Sidebar></sidebar>
</div>
)
}
}
// 子组件
class Sidebar extends React.Component {
render() {
return (
<div>
<p>侧边栏</p>
<Navbar></Navbar>
</div>
)
}
}
// 孙子组件
class Navbar extends React.Component {
// 使用
static contextTypes = {
user: PropTypes.String
}
render() {
return (
// 在孙子组件中使用祖先组件中user属性
<div>{this.context.user}的导航栏</div>
)
}
}
以上也可以使用react-redux解决
connect:负责连接组件,给到redux里的数据放到组件的属性里
Provider: 把store放到context里,所有的子元素可以直接取到store
// 实现Provider功能
class Provider extends React.Component {
static childContextTypes = {
store: PropTypes.object
}
getChildContext() {
return {store: this.store}
}
constructor(props, context) {
super(props, context)
this.store = props.store
}
render() {
return this.props.children
}
}
实现connect
- 负责接收一个组件,把state里的一些数据入进去,返回一个组件
- 数据变化的时候,能够通知组件
// 写高阶函数时使用双箭头函数会比较简洁
export const connect = (mapStateToProps=state=>state, mapDispatchToProps={}) => (WrapComponent) => {
return class ConnectComponent extends React.Component {
static contextTypes = {
store: PropTypes.object
}
constructor(props, context) {
super(props, context)
this.state = {
props: {}
}
}
componentDidMount() {
const {store} = this.store
this.update()
}
update() {
// 获取mapStateToProps和mapDispatchToProps,放入this.props中
const {store} = this.context
const stateProps = mapStateToProps(store.getState())
}
render() {
return <WrapComponent {...this.state.props}></WrapComponent>
}
}
}