react中函数组件传值

函数式组件传值：

父子组件传值

父传子:

        1）在父组件中找对子标签，在子组件的标签上添加自定义属性，自定义属性名 = {要发送的数据}
            <Child 自定义属性名={要发送的数据}></Child>
        2）在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 props
            function 子组件名(props){
                return(
                    <div>{props.自定义属性名}</di>
                )
            }

子传父：

		前提必须要有props，在函数组件的行參的位置，需要的是子组件的函数的props
        1）在子组件中自定义一个数显进行数据发送，在需要出发的dom元素上面绑定自定义事件
        子组件模板
            <p onClick={自定义事件}></p>
            function 自定义事件(){
                props.**自定义属性名a**(要发送的数据)
            }

        2）在父组件中找到子组件标签，在子组件标签上面写 自定义属性={新的自定义方法}
            <子组件标签 **自定义属性名a**={新的方法}></子组件标签>
		（这个两个  **自定义属性名** 要一致）
        3）父组件中接收自定义参数，这个自定义参数就是子组件传递给父组件的数据
            function 新的方法(参数){
                console.log(参数) // 参数就是子组件传递给父组件的数据
            }

函数式父子组件传值案例

父组件 A.js

import React, { useState } from 'react'
import Aa from './Aa'

export default function A() {
    
    const [msg,setMsg] = useState('这是父组件需要传递的信息');
    const [arr,setArr] = useState([1,2,3,4,5,6])
  return (
    <div>
        A
        <Aa name={msg} arr={arr} msg={get}></Aa>
    </div>
  )
  function get(a,b){
      console.log(a,b);
  }
}

子组件 Aa.js

import React, { useState } from 'react'

export default function Aa(props) {

    const [msg,setMsg]=useState('Aa子组件的值')
  return (
      <React.Fragment>
        <div>{props.name}</div>
        <div>
            {
                props.arr.map((item,i)=>
                    <li key={i}>父组件传递过来的arr里面遍历过来的第{i+1}值:{item}。</li>
                )
            }
        </div>
        <br/>
        <button onClick={()=>send(1)}>传值给父组件</button>
      </React.Fragment>
  )
  function send(i){
      console.log(i);
      props.msg(msg,i)
  }
}

非父子组件传值

useContext

useRef

redux

redux三大核心
1 action 触发reducer方法动作
2 reducer
3 store

redux使用

1 安装redux react-redux
cnpm i redux react-redux --save-dev

2 创建store.js
import {createStore} from 'redux'
import 自定义名字 from 'reducers文件中的对应的reducer'

const store=createStore(自定义名字)

export default store

3 在需要发送数据的组件中 首先引入store 使用store.dispatch({type: '类型', payload: 要发送的数据})

sendData() {
    store.dispatch({
        type: '类型',
        payload: 要发送的数据
    })
}

4 创建reducers文件 在文件中编写reducer
export default(state, action)=> {
    switch(action.type) {
        case 'type类型':
            return action.payload   // 获取发送过来的数据

        default:
            return 默认值
    }
}

5 在需要接受的组件中 使用store.getState()来获取发送过来的数据

store.subscribe()实时监听store仓库中数据的变化  然后试试更新dom数据

如果react项目中有多个reducer 这个时候 要去创建store 并且需要合并多个reducer
    1 需要在store.js文件中引入combineReducers
    import {combineReducers} from 'redux'

    const reducers=combineReducers({
        自定义名字1: reducer1,
        自定义名字2: reducer2
        ...
    })

    2 需要在store中引入reducers
    const store=createStore(reducers)

    3 在需要发送数据的组件中 通过store.dispatch({type: 'reducers定义的type类型',payload: 要传递的数据})

    4 在需要接收数据的组件中 通过store.getState().reducer1 来获取reducer1中数据