温习Redux中相关的React知识点

组件间数据传递

React核心思想就是数据和程序分离,用state进行状态的控制,用props进行数据间传递。

利用stateprops进行组件间数据传递

核心思想

通过子组件,修改父组件的 state ,然后把父组件的 state 作为所有子组件的 props 值传入各个子组件

创建父组件

  1. 创建组件App
  2. 将我们需要的数据放在state
  3. 写一个handleClick方法进行修改数据
  4. handleClick方法传入CommentBox组件中
  5. handleClick方法的参数为子组件获取的值
  6. state的值传入子组件
import React, { Component } from 'react'
import CommentBox from './CommentBox'

class App extends Component {
  state = {
    data: ''
  }
  handleClick(data){
    this.setState({data:data})
  }
  render() {
    console.log('App:',this.state.data)
    return (
      <div className="App">
        <CommentBox data={this.state.data} handleClick={this.handleClick.bind(this)} />
      </div>
    )
  }
}

export default App

子组件CommentBox

  1. 创建组件CommentBox
  2. 通过ref抓取虚拟节点
  3. 通过this.props.handleClick拿到父组件传过来的handleClick方法
  4. 通过子组建的handleClick方法来获取input内输入的value传给父组件
  5. 通过props拿到父组件传过来的值(根据对应的名称)
import React from 'react'

class CommentBox extends React.Component{
  state = {
    data: this.props.data
  }
  handleClick(){
    this.props.handleClick(this.comment.value)
    this.setState({data:this.props.data})
  }
  render(){
    let {data} = this.state
    //Es6对象的解构赋值
    return(
      <div>
        { data.map(item => <li>{item}</li>) }
        <input className='input' type='text' ref={value=>this.comment=value} />
        <input type='button' value='传给父组件' onClick={this.handleClick.bind(this)} />
      </div>
    )
  }
}

export default CommentBox

关于触发render的条件

  1. 组件的state发生改变
import React from 'react'

class App extends React.Component {
  state = {
    data:1
  }
  handleClick(){
    this.setState({data:0})
  }
  render(){
    console.log('render被触发')
    return(
      <div>
         <button onClick={this.handleClick.bind(this)}>点击</button>
      </div>
    )
  }
}

export default App;
  1. 组件的props发生改变
//父组件
import React, { Component } from 'react';
import Son from './Son';

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: 1
    }
  }
  handleClick(e){
    e.preventDefault();
    this.setState({
      data: this.state.data + 1
    })
  }
  render(){
    return(
      <div>
        <Son num={this.state.data} />
        <button onClick={this.handleClick.bind(this)}>Click</button>
      </div>
    )
  }
}

export default App;
//子组件
import React, { Component } from 'react';

class Son extends Component {
  render(){
    console.log('子组件的render被触发')
    return(
      <h1 >
          { this.props.num }
      </h1>
    )
  }
}

export default Son;

results matching ""

    No results matching ""