react学习之路（2.1）----数据传递（state，props（父级向子级传递数据）)

在react中：如果数据发生改变时，无法改变时促使view的数据变化；

一：接下来看代码和效果：

class Index extends React.Component{
	constructor(props) {
        super(props);
      	
       this.num=10
    }
	
add(){
      this.num++;
      console.log(this.num);
  
}
  render(){
    let arr=['1',2,3,'liuyy'];
    return(
          <div>
             <input type='button' onClick={this.add.bind(this)}  value='点我'/>
             {this.num}
          </div>
    )
  }
}

值是变化啦，但是未引起view变化的显示，当然使用闭包当然也无法完成视图的变化，所以react中，就引进state的状态机；

数据传递之一：state，在菜鸟教程中，是这么说的-----------

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

接下来上代码：

class Index extends React.Component{
    constructor(props) {
        super(props);
          this.state={
          num:10,
          a:7,
          b:8
        }
    }
    
add(){
      this.setState({
        num:this.state.num+1,

      })
  
}
render(){

    return(
          <div>
             <input type='button' onClick={this.add.bind(this)}  value='点我'/>
             <p>{this.state.num}</p>
             <p>{this.state.a}</p>
             {this.state.b}
          </div>

state是内部的（localstorage本地的组件的，不会改变其他组件的值），只会改变本组内部的数据，数据的改变不会相互干扰；state更新是异步的不会相互干扰；

二.数据传递二:props只能用于数据接收，父级传下来的数据，讲数据接收，先得讲组件的运用，如何运用组件；

组件的使用法则三部走：

1.先引入：例如要引入hello这个作为组件，可以这么干

import Hello from './hello'

from后面是路径，你的组件存放的文件位置，必须写对，不对比报错，import后面定义的组件名，必须首字母大写；小写必定抱一个错误；

2.调用组件名：

    return(
          <div>
             <Hello/>
          </div>
    )

组件名调用必须闭合的标签，双标签和单标签都可以用；

3.在子组件中进行暴露出来，不然父级无法调用；子级中也必须加载引入react库；

import React ,{Component}from "react";

 class Hello extends Component{
  render(){
    return(
      <div className="hello">
            我是新来的！
      </div>

    )
  }
}
export default Hello

上面三步完成了一个组件的引入；

接下来完成组件数据的传递；

父级组件（index.jsx）：

        this.state={
          con:345
        }
    }
    
add(){
 
    this.setState({
      con:this.state.con+1
    })
  
}
render(){
    
    return(
          <div>
          
            <Hello num={this.state.con}></Hello>
            <News/>
            <input type='button' onClick={this.add.bind(this)} value='有本事就'/>
           
          </div>
    )
  }

子级组件（hello.jsx）：

export default class Hello extends Component{
	constructor(props){
		super(props)
		console.log(typeof this.props.num)
		console.log(this.props.num);

	}
	render(){
    return(
      <div data-a='jon' className="hello">
      		
	        {this.props.num}
      </div>

props只能接受数据，父级的数据发生变化，子组件也能通过props进行接受，但是子组件是无法改变组件中props的值的；

如果要改变父级传入的数据，可以通过state进行处理该数据值；

子级如果想要更改父级的数据，使其发生变化，可以通过向子级传递一个方法或者函数：

父级组件：
class Index extends Component{
	constructor() {
    super()
    this.state={
      
      num:35
    }
  }
render(){
    
    return(
          <div>
            <Hello test={this.test.bind(this)} num={this.state.num} ></Hello>{//定义组件调用

            }
           <div>
              props数据传递改变：{this.state.num}
              
           </div>
          </div>
    )
  }

子级组件：
 <input type="button" onClick={this.props.test} value='子级改变数据'/>
子级的数据变化:{this.props.num}

就这样很巧妙的将能将父级组件的数据进行改变；

react学习之路（2.1）----数据传递（state，props（父级向子级传递数据）)

猜你喜欢