React基础以及父子组件传参

React

是facebook推出的一款前端开发框架，只要针对view层进行操作的

在React中所有的组件都可以看成是function

React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。

在react中有些重要的概念：state,class。

一、class定义组件

组件需要继承在React.Component

组件内部有一个render方法，里面返回的数据会显示在页面上

1.创建项目时需要注意的实现

 （1）创建script标签

（2）在页面渲染组件  在script标签底部写，表示所有的html标签都将写在id为app的标签中

并创建App类（组件）

作为父组件， 可以在该组件中添加子组件

组件必须要有

render(){
  return()
}

在组件中，如果要绑定数据 使用一对{}，相当于解构赋值

class创建的组件基本结构：

class C extends React.Component{
    constructor(props){
      super(props)
    
      this.state={ 
        counter: 1, 
        counter2:1 
      }      
   

    //渲染函数 用来在页面上展示数据
    render(){
      return (<div>
        <h5>我是组件C-step={this.props.step}<     <button  onClick={this.clickHandle.bind(this)}>当前的counter:{ this.state.counter}</button>/h5>
   
        <h5>当前的counter2:{ this.state.counter2}</h5>
        </div>)
    }
  }

 

react中如果改变state需要调用setState方法

setState是异步的，接收第二个参数 是一个function表示set执行完毕 是回调函数

 class C extends React.Component{
    constructor(props){
      super(props)
      this.state={ counter: 1, counter2:1 }
    }
    clickHandle(){
      console.log(this)
      // this.state.counter+=1
      // react中如果改变state需要调用setState方法
      // setState是异步的，接收第二个参数 是一个function表示set执行完毕 是回调函数
      this.setState({
        counter:this.state.counter + 1
      },function(){ //回调函数
        console.log('setState执行完毕')
        console.log(this.state.counter)
      })
      console.log(this.state.counter) // 1
      this.setState({
        counter2:this.state.counter + 2
      })
      console.log(this.state.counter2) // 1
    }

    //渲染函数 用来在页面上展示数据
    render(){
      return (<div>
        <h5>我是组件C-step={this.props.step}</h5>
        <button  onClick={this.clickHandle.bind(this)}>当前的counter:{ this.state.counter}</button>
        <h5>当前的counter2:{ this.state.counter2}</h5>
        </div>)
    }
  }

 

二、function定义组件

通过function定义一个组件，需要有一个返回值作为组件的返回数据

返回值为一个html节点，用来在页面上展示

基本格式如下：

function H(props) {
      const { label } = props // 解构赋值

      // 在返回数据的时候进行展示
      // 如果要绑定数据 使用一对{}

      return (<div>
      <h1>我是一个标题</h1>
      <p>{ label }</p>
      <C step={ 2 }/>
      </div>)
    }

三、function定义的组件与class定义组件的区别

function定义的组件与class定义的组件的区别

1.function定义的组件代码比较少

     在16.8之前，function没有state属性，不可以生成局部状态的

2. 16.8之后新增hocks,可以直接使用state

      class定义的组件，可以产生一个局部的状态，并且有生命周期

  function定义的组件是没有这些的，但是在16.8之后的react中新增了许多hocks函数，可以使用state

useState 可以为function定义的组件设置一个state数据（16.8之后新增的方法）

返回两个值

参数一 状态state的属性名

参数二 修改数据的函数

function设置局部变量以及改变变量的值

简单功能：点击按钮修改counter的值

// 1、引入 useState 
const { useState} = React

function Counter2(){

    // 2、自定义的state数据（局部变量），以及改变该数据的方法

      const [count,setCount] = useState(0)
      
      const [name, ModName] = useState('tom')

      return(<div>
          <button onClick={()=>{setCount(count+1)}}>计数值：{count}</button>
          <button onClick={()=>{ModName(name+count)}}>{name}</button>
        </div>)
    }

 

 

function设置局部变量的方法类似于下面的一段原生js代码

function useAbc(p){
      p.num += 1
      function changeP(d){
       return p.num += d
      }
      return [p,changeP]
    }
    //引用类型，可以改变count的值
    const [count,changCount] = useAbc({num:3})

四、父子组件之间传值

通过使用构造函数的形式进行传值

1、父组件向子组件传值

父组件通过props传递（在子组件标签里写属性来进行传递）数据到子组件，在子组件中使用this.props进行调用

在父组件中操作：

在父组件调用子组件时，将参数以属性的方法传递

render(){
      return(<div>
        <h5>最外层组件</h5>
        <h3>子组件中数据的长度为{this.state.listCount}</h3>
        <Products step={2} p={{name:'Products',id:'1111',code:'222'}}/>
        </div>)
    }

 

在子组件中通过this.props可以获取父组件传递的参数

2、子组件向父组件传值

子组件向父组件传值使用方法调用

父组件中

     在调用组件的时候通过属性把一个function传递到子组件内部

子组件通过调用父组件传递的function可以操纵父组件中的代码 改变数据

 

在父组件中，将方法以参数的形式传递到子组件中

 

在子组件中进行调用