温习Redux中相关的React知识点

组件间数据传递

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

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

核心思想

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

创建父组件

  1. 创建组件App
  2. 将我们需要的数据放在state
  3. 写一个handleClick方法进行修改数据
  4. handleClick方法传入CommentBox组件中
  5. handleClick方法的参数为子组件获取的值
  6. state的值传入子组件
  1. import React, { Component } from 'react'
  2. import CommentBox from './CommentBox'
  3. class App extends Component {
  4. state = {
  5. data: ''
  6. }
  7. handleClick(data){
  8. this.setState({data:data})
  9. }
  10. render() {
  11. console.log('App:',this.state.data)
  12. return (
  13. <div className="App">
  14. <CommentBox data={this.state.data} handleClick={this.handleClick.bind(this)} />
  15. </div>
  16. )
  17. }
  18. }
  19. export default App

子组件CommentBox

  1. 创建组件CommentBox
  2. 通过ref抓取虚拟节点
  3. 通过this.props.handleClick拿到父组件传过来的handleClick方法
  4. 通过子组建的handleClick方法来获取input内输入的value传给父组件
  5. 通过props拿到父组件传过来的值(根据对应的名称)
  1. import React from 'react'
  2. class CommentBox extends React.Component{
  3. state = {
  4. data: this.props.data
  5. }
  6. handleClick(){
  7. this.props.handleClick(this.comment.value)
  8. this.setState({data:this.props.data})
  9. }
  10. render(){
  11. let {data} = this.state
  12. //Es6对象的解构赋值
  13. return(
  14. <div>
  15. { data.map(item => <li>{item}</li>) }
  16. <input className='input' type='text' ref={value=>this.comment=value} />
  17. <input type='button' value='传给父组件' onClick={this.handleClick.bind(this)} />
  18. </div>
  19. )
  20. }
  21. }
  22. export default CommentBox

关于触发render的条件

  1. 组件的state发生改变
  1. import React from 'react'
  2. class App extends React.Component {
  3. state = {
  4. data:1
  5. }
  6. handleClick(){
  7. this.setState({data:0})
  8. }
  9. render(){
  10. console.log('render被触发')
  11. return(
  12. <div>
  13. <button onClick={this.handleClick.bind(this)}>点击</button>
  14. </div>
  15. )
  16. }
  17. }
  18. export default App;
  1. 组件的props发生改变
  1. //父组件
  2. import React, { Component } from 'react';
  3. import Son from './Son';
  4. class App extends Component {
  5. constructor() {
  6. super();
  7. this.state = {
  8. data: 1
  9. }
  10. }
  11. handleClick(e){
  12. e.preventDefault();
  13. this.setState({
  14. data: this.state.data + 1
  15. })
  16. }
  17. render(){
  18. return(
  19. <div>
  20. <Son num={this.state.data} />
  21. <button onClick={this.handleClick.bind(this)}>Click</button>
  22. </div>
  23. )
  24. }
  25. }
  26. export default App;
  1. //子组件
  2. import React, { Component } from 'react';
  3. class Son extends Component {
  4. render(){
  5. console.log('子组件的render被触发')
  6. return(
  7. <h1 >
  8. { this.props.num }
  9. </h1>
  10. )
  11. }
  12. }
  13. export default Son;