React传递参数的多种方式

最多见的就是父子组件之间传递参数

　　父组件往子组件传值，直接用this.props就能够实现

　　在父组件中，给须要传递数据的子组件添加一个自定义属性，在子组件中经过this.props就能够获取到父组件传递过去的数据

// 父组件
 render() {
        return (
                // 使用自定义属性传递须要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>
            )
    } 

//子组件　
//经过this.props.toson就能够获取到父组件传递过来的数据 

、、若是还须要往孙组件传递那么在子组件经过自定义属性继续传递就好了
      tograndson={this.props.toson}
、、孙组件经过this.props.tograndson获取到数据

　

　子组件给父组件传值的话，须要在父组件设置接收函数和state，同时将函数名经过props传递给子组件

　　也就是给子组件传入父组件的方法，在子组件进行调用

//孙子组件
export default class Grandson extends Component{
    render(){
        return (
            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：
                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        )
    }
};
 
//子组件
export default class Child extends Component{
    render(){
        return (
            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>
        )
    }
};
 
//父组件
export default class Parent extends Component{
 
    constructor(props){
        super(props)
        this.state={
            username: '',
            sex: ''
        }   
    },
    handleVal(event){
        this.setState({username: event.target.value});
    },
    handleSelect(value) {
        this.setState({sex: event.target.value});
    },
    render(){
        return (
            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名：{this.state.username}</div>
                <div>用户性别：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
}

　　前一段时间有人问过我这样一个问题，constructor里面的super()是干吗用的？

总结一下：

　　若是要在子类的constructor里使用this，必须调用父类constructor，不然就拿不到this

　　那么问题就来了，如何调用父类的constructor呢？ 经过super()

　　若是要在constructor里使用父组件传递过来的参数，必须在调用父组件super时，传递参数给父组件的constructor

　　若是不在constructor里面使用this，或者参数，就不须要super ； 由于React以及帮你作了this，props的绑定

 

路由传参

　　安装 npm install react-router-dom --save-dev

　　定义路由(通常会放在外面)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter> 

当页面跳转时

<li  onClick={el =>　this.props.history.push({
　　　pathname:'/detail',
    　 state:{id:3}
})}
>
</li>

 

接收    经过this.props.history.location能够获取到传递过来的数据

路由传参可能会有这个问题，就是只有在路由定义时挂载的组件中才会有props里面的location history match 

路由上挂载的那个组件通常都是Container.js，通常咱们会往下分出UI.js组件，在这里面进行点击跳转，UI组件props里没有location history match 

须要用到高阶组件withRouter

 

 状态提高

　　将多个组件须要共享的状态提高到离他们最近的那个公共父组件上，而后父组件经过props分发给子组件

 

context

　　当某个组件在本身的context中保存了某个状态，那个该组件下的全部子孙组件均可以访问到这个状态，不须要中间组件的传递，而这个组件的父组件是没办法访问的 

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
经过getChildContext()将属性传递给全部的子孙组件
提供 context 的组件必须提供  做为 context 的声明和验证。childContextTypes

 

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>标题</h1>
    )
  }
}
子组件要获取 context 里面的内容的话，就必须写  来声明和验证你须要获取的状态的类型，它也是必写的，若是你不写就没法获取 context 里面的状态。
 想获取 ，它是一个字符串，咱们就在  里面进行声明。contextTypesTitlethemeColorcontextTypes

 

引入redux

　　redux为React提供可预测化的状态管理机制

　　redux将整个应用状态存储到store,store里保存着一个state状态树

　　组件能够派发(dispatch)  行为 (action)  给store , 而不是直接通知其它组件

　　其它组件能够经过订阅store中的状态state来刷新本身的视图