immutable

代码：点击改变名字按钮，打印*****************子组件渲染***************

import React ,{Component}from 'react'
import { render } from 'react-dom'
import { connect, Provider } from 'react-redux'

import { createStore } from 'redux';

function Reducer(state={name:"Jack",age:18,info:{name:"H",age:20}},action){
  if (action.type==='changeName'){
    return{...state,name:action.name}
  }
  return{...state}
}
const store = createStore(Reducer)
function mapStateToProps(state){
  return state;
}

@connect(mapStateToProps)
class Parent extends Component{
	constructor(props){
    super(props)
    this.changeName=this.changeName.bind(this)
  }
  changeName(){
    this.props.dispatch({type:'changeName',name:'Tom'})
  }
	render(){
		return(
			<div>
				<div>我是父组件,名字：{this.props.name}<button onClick={this.changeName}>改变名字</button></div>
				<Child/>
			</div>
		)
	}
}



class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件</div>
			</div>
		)
	}
}

render(
  <Provider store={store}>
    
      <Parent />
    
  </Provider>,
  document.getElementById('root'),
)

给子组件添加装饰器@connect()后，执行改变名字按钮，没有打印输出。

@connect()
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件</div>
			</div>
		)
	}
}

给子组件添加装饰器@connect(({age})=>({age}))后，点击改变名字按钮，没有打印输出。

@connect(({age})=>({age}))
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件</div>
			</div>
		)
	}
}

给子组件添加装饰器@connect(({info})=>({info}))后，点击改变名字按钮，没有打印输出。

这是因为

var obj1={info:{name:"Jack"},age:20}
var obj2={...obj1}
obj1===obj2//false
obj1.info===obj2.info//true

@connect(({info})=>({info}))
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件</div>
			</div>
		)
	}
}

给子组件添加装饰器@connect((state)=>(state))后，点击改变名字按钮，打印*****************子组件渲染***************。

这种写法影响性能，所以只把子组件需要的数据映射到props上就好。

@connect((state)=>(state))
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件</div>
			</div>
		)
	}
}

 

 

点击改变名字按钮，打印*****************子组件渲染***************

import React ,{Component}from 'react'
import { render } from 'react-dom'
import { connect, Provider } from 'react-redux'
import { createStore } from 'redux';
let defaultState={info:{name:{first:"Jack",last:"Will"},car:{color:"white",brand:"Benz"}}};
function Reducer(state=defaultState,action){
  if (action.type==='changeName'){
    
    return {info:{name:{first:"Hello",last:"Will"},car:{color:"white",brand:"Benz"}}}
  }
   return state;
}
const store = createStore(Reducer)

@connect((state)=>({name:state.info.name}))
class Parent extends Component{
	constructor(props){
    super(props)
    this.changeName=this.changeName.bind(this)
  }
  changeName(){
    this.props.dispatch({type:'changeName'})
  }
	render(){
		return(
			<div>
				<div>我是父组件,名字：{this.props.name.first}<button onClick={this.changeName}>改变名字</button></div>
				<Child/>
			</div>
		)
	}
}


@connect((state)=>({car:state.info.car}))
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件,汽车类型{this.props.car.brand}</div>
			</div>
		)
	}
}

render(
  <Provider store={store}>
    
      <Parent />
    
  </Provider>,
  document.getElementById('root'),
)

 

使用immutable，点击改变名字按钮，没有打印输出。

import React ,{Component}from 'react'
import { render } from 'react-dom'
import { connect, Provider } from 'react-redux'
import Immutable from 'immutable';
import { createStore } from 'redux';
let defaultState=Immutable.fromJS({info:{name:{first:"Jack",last:"Will"},car:{color:"white",brand:"Benz"}}})
function Reducer(state=defaultState,action){
  if (action.type==='changeName'){
    state =  state.setIn(['info','name','first'],"Hello");
    return state
  }
   return state;
}
const store = createStore(Reducer)

@connect((state)=>({name:state.getIn(['info','name'])}))
class Parent extends Component{
	constructor(props){
    super(props)
    this.changeName=this.changeName.bind(this)
  }
  changeName(){
    this.props.dispatch({type:'changeName'})
  }
	render(){
		return(
			<div>
				<div>我是父组件,名字：{this.props.name.get('first')}<button onClick={this.changeName}>改变名字</button></div>
				<Child/>
			</div>
		)
	}
}


@connect((state)=>({car:state.getIn(['info','car'])}))
class Child extends Component{
	render(){
    console.log("*****************子组件渲染***************")
		return(
			<div>
				<div>我是子组件,汽车类型{this.props.car.get('brand')}</div>
			</div>
		)
	}
}

render(
  <Provider store={store}>
    
      <Parent />
    
  </Provider>,
  document.getElementById('root'),
)