react设计思想
- 属性展开 - 保留当前组件需要的props，并且使其他的props传递下去
var obj = {a: 1, b: 2, c: 3, d: 4, e: 5}
const { a, ...other } = obj
console.log(other) // {b: 2, c: 3, d: 4, e: 5}
- 在react中，界面完全由数据驱动
- 在react中，一切都是组件
- props是react组件之间通讯的基本方式
// 可以实现记录用户访问路径操作信息，每次进入某个页面或者功能的时候都会访问一个线上资源
// a.js
export default Beacon extends React.Component {
componentDidMount() {
const beacon = new Image()
beacon.src = 'https://sxc.image/i.png'
}
render() {
return null
}
}
// b.js
render() {
<div>
<Beacon/>
</div>
}
// 代码组织方式优化 - renderXXX函数访问的是同样的props和state，代码耦合严重
class StopWatch extends React.Component {
renderClock() {
}
renderButtons() {
}
renderSplitTimes() {
}
render() {
const Clock = this.renderClock()
const Buttons = this.renderButtons()
const SplitTimes = this.renderSplitTimes()
return (
<div>
{Clock}
{Buttons}
{SplitTimes}
</div>
)
}
}
// 更好的组织方式
class StopWatch extends React.Component {
render() {
return (
<div>
<Clock />
<Buttons />
<SplitTimes />
</div>
)
}
}
const Clock = (props) = {
}
const Buttons = (props) => {
}
const SplitTimes = (props) => {
}
设计react组件原则及最佳实践
1. 保持接口小，props数量要少
2. 根据数据边界来划分组件，充分利用组合
3. 把state往上层组件提取，让下层组件只需要实现为纯函数
4. 避免renderXXXX函数
5. 给回调函数类型的props加统一前缀，比如on or handle - onStart
6. 使用propTypes来定义组件的props
7. 尽量每个组件都有自己专属的文件
8. 用解构赋值的方式获取参数props的属性 - const { a, b } = { a: 1, b: 2 }
9. 利用属性初始化来定义state和成员函数 - 给默认值 const { data = [] } = this.props
/*
1. 尽量不要在jsx中写内联函数
2. 每次渲染，都会产生新的函数对象
3. 每次传给组件的props(方法，数据，状态等)都是新的，无法通过shouldComponentUpdate对props的检查来避免重复渲染
*/
<Buttons
activated={this.state.isStarted}
onStart={() => {/* TODO */}}
onReset={() => {/* TODO */}}
/>
/*
1. style属性的使用
2. 内联样式在组件每次渲染时都会创建一个新的style对象
3. 如果样式不发生改变，应该把style对象提取到组件之外，可以重用一个对象
*/
// bad
const Clock = (props) => {
return <h1 style={color: '#ccc'}>小姐姐真好看<h1/>
}
// good
const style = {
color: '#ccc'
}
const Clock = (props) => {
return <h1 style={style}>小姐姐真好看<h1/>
}
组件样式
1. 不同组件中相同的元素样式相互影响，a.js与b.js中都有h1组件，样式之间会相互影响
2. 添加styled-jsx/styled-component支持
// a.js
index.css
h1: {
color: red
}
<h1>a</h1>
// b.js
<h1>b</h1>
// a.js
.a h1: {
color: red
}
<div className='a'>
<h1>a</h1>
<div/>
// b.js
<div className='b'>
<h1>a</h1>
<div/>
状态组件与无状态组件分割
1. 软件设计原则"责任分离"，就是让一个模块责任尽量少，每个模块专注于一个功能，有利于代码的维护
2. react中数据渲染页面，UI = f(data)，但是尽量把获取和管理数据与界面渲染分开，即把获取数据与管理数据的逻辑放在父组件，把渲染界面的逻辑放在子组件
3. A组件渲染B组件时，即使props传入一样，B组件也会完整走一遍渲染流程
4. 函数形式的react组件，好处是不需要管理state，占用资源少，但是函数组件无法利用shouldComponentUpdate来优化减少渲染
5. PureComponent中实现的shouldComponentUpdate会对传入的参数进行浅比较，当传入的props为一个对象之类的，比如由{a: 1, b: 2} => {a: 2, b: 2}，可能会出现UI未更新的情况出现
6. shouldComponentUpdate函数，每次渲染render函数之前会被调用，返回true继续渲染，返回false立刻停止，可以对深层次的数据处理
7. 在使用PureComponent时，尽量在render定义之外创建所有对象，数组和函数，并确保在各种调用间，不发生更改 - 参考table例子
8. React.memo浅比较
export default class A extends React.Component {
state = {
joke: null
}
componentDidMount() {
fetch(url, {header: {'Accept': 'application/json'}})
.then(res => {
return res.json()
})
.then(json => {
this.setState({joke: json.joke})
})
}
render() {
return <B value={this.state.joke} />
}
}
export default class B extends React.Component {
render() {
return (
<div>
<img src={url} />
{this.props.value || 'loading...'}
</div>
)
}
}
<Table
// map每次返回一个新数组，浅比较失败
rows={rows.map()}
// 枚举对象总不相同 - 尽量不写行内样式
style={{color: '#ccc'}}
// 箭头函数每次都会重新渲染 - 组件层级不通过箭头函数绑定事件
onUpdate={() => {}}
/>
高阶组件
待补充...
render props模式
1. render props的形式
2. render props其实就是依赖注入
3. 如何利用render props实现共享组件之间的逻辑
4. 依赖注入：**当逻辑A依赖逻辑B时，如果让A直接依赖B，A做不到通用。依赖注入就是把B的逻辑以函数形式传递给A，让A和B之间只需要对函数接口达成一致 - 组件A和B之间，不是把B组件写在A组件中，而是通过把B组件当参数传到A组件当中**
// 用户登录与未登录情况下显示不同的组件
const Auth = (props) => {
const userName = getUserName()
if(userName) {
const allProps = {userName, ...props}
return (
<React.Fragment>
{props.login(allProps)}
</React.Fragment>
)
} else {
return (
<React.Fragment>
{props.noLogin(props)}
</React.Fragment>
)
}
}
<Auth
login={({userName}) => <h1>Hello {userName}</h1>}
noLogin={() => <h1>Please login</h1>}
/>
提供者模式
1. 提供者模式，为了**解决组件间跨层级的信息传递**，A-B-C-D-...-X，当数据要从A传递到X时，通过props传递时，会经过B-C-D...，然而在B-C-D...中不需要使用props中的数据，而且组件在变动时，容易出现props传递错误的情况出现
2. 提供者模式，本质由2个角色组成，一个叫‘提供者’，一个叫‘消费者’，提供者(A)位于组件树靠上的位置，消费者(X)处于靠下的位置
3. 实现方式，通过**react提供的context功能进行实现(v16.3.0+)，context功能可以创造一个‘上下文’，在这个上下文之中的所有组件都可以访问到同样的数据**
4. 参考react-app中x2代码
组合组件
1. 模式(Pattern) = 问题场景(Context) + 解决方法(Solution)
2. 解决的问题，**父组件想传递一些信息给子组件，但是通过props传递又很麻烦时**
组件状态
1. UI = f(data)，data = props + state，props代表外部传进来的数据，state代表组件内部状态
2. 什么样的数据可以存放在成员变量中？
3. 如果数据由外部传入，放在props中
4. **如果是内部组件数据，这个数据的更改是否应该立刻引发一次组件的重新渲染，如果是，放在state中，不是就放在成员变量中**
5. state不会被同步修改，在react的生命周期中或者处理函数中同步调用，setState不会立即同步state和重复渲染，但是如果setState由其他条件引发，就有可能不是这样了 - 在生命周期中或者事件函数中调用时，react会打开一个类似标记的东西，标记打开的过程中，setState调用都是往任务队列里放任务，当函数调用结束时，批量处理任务队列，关闭标记
6. 函数式setState - 当setState的第一个参数为函数时，任务列表上增加的就是一个可执行的任务函数，react没处理完一个任务，都会更新一次state，然后把新的state传递给这个任务函数
// 代码1
class Foo extends Component {
foo = 'foo'
render() {
return <div>{this.foo}</>
}
}
// 代码2
this.state = {
count: 0
}
this.setState({count: 1})
console.log(this.state.count) // 0
// 代码3
setTimeout(() => {
this.setState({count: 2})
console.log(this.state.count) // 2
})
// 代码4 - 结果为1 三个任务都给了this.state.count一个值
this.state = {
count: 0
}
this.setState({count: this.state.count + 1})
this.setState({count: this.state.count + 1})
this.setState({count: this.state.count + 1})
// 代码5 - 函数式setState，结果为3
// this.setState((preState, props) => ({})
function increment(state, props) {
return {count: state.count + 1}
}
this.state = {
count: 0
}
this.setState(increment)
this.setState(increment)
this.setState(increment)
redux使用模式
1. 使用场景 - 复杂应用下的状态维护，类似于一个全局的store，**并且store只有接受某些‘事件’(action)，才可以修改store上的数据，store对这些‘事件’的响应，就是修改状态(修改状态的函数reducer)**
2. 事件(action) - 响应函数(reducer) -store
3. 对于某个状态，是放在store中还是组件自身状态中？
4. 看状态是否会被多个react组件共享 - 不同级组件件的数据共享
5. 看这个组件被unmount之后重新被mount，之前的状态是否需要保留 - 组件销毁后又重新渲染，之前的输入是否要保留
6. 代码组织方式 - 基于角色分类(modal,services,view,action,reducer)和基于功能分类(安装功能所在模块分类)
7. connect函数接受两个参数，一个mapStateToProps是把Store上的state映射为props，另一个mapDispatchToProps是把回调函数类型的props映射为派发action，connect函数调用会产生一个‘高阶组件’
8. react-redux中使用了三个模式 - 提供者模式，高阶组件，有状态组件和无状态组件
// 代码1
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import store from './store'
const store = createStore(store)
<Provider store={store}>
{Provider之下的所有组件都可以connect到给定的store}
</Provider>
// 代码2
const Button = ({count, onIncrement}) => {
return (
<div>
<div>{count}</div>
<button onClick={onIncrement}>+</button>
</div>
)
}
// 代码3
import { connect } from 'react-redux'
const mapStateToProps = (state) => {
return {
count: count + 1
}
}
const mapDispatchToProps = (dispatch) => {
onIncrement: () => dispatch({type: 'INCREMENT'})
}
const Counter = connect(mapStateToProps, mapDispatchToProps)(Button)
mobx使用模式
待补充...
redux与mobx模式对比
待补充...
路由 react router
1. 单页应用 - 把URL映射到对应的页面来处理，页面之间切换做到局部更新
2. 动态路由 - 指的路由规则不是预先确定的，而是在渲染过程中确定的(React Router v4)
3. 静态路由 - 路由规则是固定的
未完待续...