React学习第八天——React基础（插槽、redux、React—redux）

React基础

1.插槽

渲染组件的时候，将想要显示的数据相当于“插入”到组件中，在其中可以将数据全部都插入组件中，也可以按需插入

class ParentDom extends React.Component {
  constructor(props) {
    super(props)
    console.log(props)
  }
  render() {
    return (
      <div>
        <h2>组件插槽</h2>
        // 这里循环的是RootDom中的元素 
        {this.props.children}
        //这里设置了一个ChildCom组件，里面有三条数据，稍后在组件中通过条件判断进行按需渲染
        <ChildCom>
          <h2 data-position="header">头部</h2>
          <h2 data-position="main">内容</h2>
          <h2 data-position="footer">尾部</h2>
        </ChildCom>
      </div>
    )
  }
}

class ChildCom extends React.Component {
  render() {
  //设置三个对应的内容属性
    let headerCom, mainCom, footerCom
    //这里循环数据，并且判断每一项内容是否等于刚才上面设置的data-position属性，如果等于，就把内容赋予给他
    this.props.children.forEach((item, index) => {
      if (item.props['data-position'] === 'header') {
        headerCom = item
      } else if (item.props['data-position'] === 'main') {
        mainCom = item
      } else {
        footerCom = item
      }
    })
    return (
      <div>
        <div className="header">{headerCom}</div>
        <div className="main">{mainCom}</div>
        <div className="footer">{footerCom}</div>
      </div>
    )
  }
}
//这里用于将数据插入ParentDom组件中
class RootDom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      arr: [1, 2, 3],
    }
  }
  render() {
    return (
      <div>
        <ParentDom>
          <h2 data-name="a" data-index={this.state.arr[0]}>
            子组件1
          </h2>
          <h2 data-name="b" data-index={this.state.arr[1]}>
            子组件2
          </h2>
          <h2 data-name="c" data-index={this.state.arr[2]}>
            子组件3
          </h2>
        </ParentDom>
      </div>
    )
  }
}

function App() {
  return (
    <div>
      <RootDom></RootDom>
    </div>
  )
}

2.Redux

redux只是一种状态管理的方案，一般用于中大型项目的时候再去使用

Store：数据仓库，用于保存数据的地方

State：对象，数据仓库里所有的数据都放在一个state中

Action：动作，触发数据改变的方法

Dispatch：将动作触发成方法

Reducer：函数，通过获取动作，改变数据，生成一个新的state，从而改变界面

//首先先导入
import  { createStore } from 'redux'
//这里设置的是获取动作，并执行动作相关的方法去改变数据，更新state

const reducer = (state = { num: 0 }, action) => {
  switch (action.type) {
    case 'add':
      state.num++
      break
    case 'decrement':
      state.num--
      break
    default:
      break
  }
  return { ...state }
}
//把数据仓库creat出来

const store = createStore(reducer)

//接下来写了两个函数，一个增加，一个减少
function add() {
  store.dispatch({ type: 'add' })
  console.log(store.getState())
}
function decrement() {
  store.dispatch({ type: 'decrement' })
  console.log(store.getState())
}

class TestRedux extends React.Component {
  render() {
    //在这里获取仓库中的State值
    let state = store.getState()
    return (
      <div>
        <h2>当前数值为：{state.num}</h2>
        <button onClick={add}>+1s</button>
        <button onClick={decrement}>-1s</button>
      </div>
    )
  }
}

function App() {
  return (
    <div>
      <TestRedux></TestRedux>
    </div>
  )
}

3.React-redux

Provider:自动将store里的state和组件进行关联

mapStateToProps：用于将store的state映射到props

mapDispatchToProps:将store中的dispatch映射到props中，实现方法的共享

Connect：将组件和数据（方法）进行连接

//同样的导入需要的库
import { createStore } from 'redux'
import { connect, Provider } from 'react-redux'

class TestReactRedux extends React.Component {
  render() {
    //通过store的state传给props，直接通过props获取state数据
    
    const value = this.props.value
    
    //将修改数据的事件或者方法传入props，等同于vuex的mapMutation mapState
    
    const onAdd = this.props.onAdd
    
    return (
      <div>
        <h2>这回是：{value}</h2>
        <button onClick={onAdd}>+1s</button>
      </div>
    )
  }
}
//这里设置一个值，用于后续判断这是执行添加的操作
const addAction = {
  type: 'add',
}
const reducer = (state = { num: 0 }, action) => {
  switch (action.type) {
    case 'add':
      state.num++
      break
    default:
      break
  }
  return { ...state }
}
//同样需要创建一个仓库
const store = createStore(reducer)

//将state映射到props
function mapStateToProps(state) {
  return {
    value: state.num,
  }
}

//将修改state数据的方法映射到props
function mapDispatchToProps(dispatch) {
  return {
    onAdd: () => {
      dispatch(addAction)
    },
  }
}

//将两个方法，数据仓库的state和修改state的方法映射到组件上形成新的组件
const AppTest = connect(mapStateToProps, mapDispatchToProps)(TestReactRedux)

ReactDOM.render(
  <Provider store={store}>
    <AppTest></AppTest>
  </Provider>,
  document.querySelector('#root')
)