React尚硅谷103-114(react-redux,优化redux,devtools,纯函数)

}

}

incrementAsync = () => {

const { value } = this.selectNumber;

this.props.jiaAsync(value*1,500)

}

render() {

//ui组件接收到的props

// console.log(this.props)

return (

当前求和为：{this.props.count}

 <select ref={c => this.selectNumber = c}>

1 2 3

 

+ 

- 

当前求和为奇数再加 

异步加 

)

}

}

容器组件简写：react-redux底层做dispatch处理，传mapDispatchToProps对象

import CountUI from ‘…/…/components/Count’

import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from ‘…/…/redux/count_action’

import { connect } from ‘react-redux’

// const mapStateToProps=state=> ({count: state })

// function mapDispatchToProps(dispatch) {

// return {

// jia: number => dispatch(createIncrementAction(number)),

// jian: number => dispatch(createDecrementAction(number)),

// jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),

// }

// }

export default connect(

state => ({ count: state }),

{

jia: createIncrementAction,

jian: createDecrementAction,

jiaAsync: createIncrementAsyncAction

}

)(CountUI)

index.js简化

//不引入store

//store.subscribe注释

2.使用Provider的时候

import store from ‘./redux/store’

import {Provider的时候} from ‘react-redux’

ReactDOM.render(

,

document.getElementById(‘root’)

);

容器组件和UI组件组成一个文件，container

手写一个container练习连接redux

---

import React, { Component } from ‘react’

import { createIncrementAction } from ‘…/…/redux/count_action’

import { connect } from ‘react-redux’

class Count extends Component {

add = () => {

this.props.jia(1)

}

render() {

return (

点我加一

数值：{this.props.he}

)

}

}

export default connect(

state => ({ he: state })

,

{

jia: createIncrementAction

}

)(Count)

多个reduces的时候，使用combineReducers

---

//store.js:

import {createStore,applyMiddleware,combineReducers} from ‘redux’

import countReducer from ‘./reducers/count.js’

import personReducer from ‘./reducers/person.js’

//引入redux-thunk,可以dispatch函数

import thunk from ‘redux-thunk’

// 总的reducer

const allReducer = combineReducers({

he:countReducer,

rens:personReducer

})

export default createStore(allReducer,applyMiddleware(thunk))

//Person.jsx组件：

import React, { Component } from ‘react’

import {nanoid} from ‘nanoid’

import {connect} from ‘react-redux’

import {addCreateAction} from ‘…/…/redux/actions/person’

class Person extends Component {

addPerson = () => {

const name = this.nameNode.value;

const age = this.ageNode.value;

const personObj = {id:nanoid(),name,age}

this.props.add(personObj)

}

render() {

console.log(this.props)

return (

---

我是person组件

<input ref={c=>this.nameNode=c} type=“text” placeholder=“输入名字”/>

<input ref={c=>this.ageNode=c} type=“text” placeholder=“输入年龄”/>

添加

{/*

• {this.props.person.name}–年龄1
• */}

  {

  this.props.person.map(ele=>{

  return (

• {ele.name}--{ele.age}

• )

  })

  }

• {this.props.count}

• )

  }

  }

  export default Person = connect(

  // 因为是总状态

  state=>({person:state.rens,

  count:state.he})

  ,

  {add:addCreateAction}

  )(Person)

  reducer.js中需要纯函数

  ---

  1. 同样的输入，必得到同样的输出（返回）

  2. 不得改写参数数据

  3. 不会产生副作用，如网络请求，输入输出设备

  css

  1，盒模型
  2，如何实现一个最大的正方形
  3，一行水平居中，多行居左
  4，水平垂直居中
  5，两栏布局，左边固定，右边自适应，左右不重叠
  6，如何实现左右等高布局
  7，画三角形
  8，link @import导入css
  9，BFC理解

  

  js

  1，判断 js 类型的方式
  2，ES5 和 ES6 分别几种方式声明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  

  js

  1，判断 js 类型的方式
  2，ES5 和 ES6 分别几种方式声明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  [外链图片转存中…(img-ZOomv3qK-1720100267592)]