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可以操纵父组件中的代码 改变数据

 

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

 

在子组件中进行调用

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值