关于React组件的介绍

内容清单:

  1. 创建组件的方法.
  2. 组件的props、state属性的特点以及用法
  3. 父传子(传值)
  4. 子传父
  5. 兄弟组件传值

1.React创建组件的方法

1.1组件化的特点(仅做了解即可)
  • 标准性
  • 组合性
  • 重用性
  • 可维护性
1.2创建函数(function)组件(重点)
//引用react模块
  import React from 'react'

//定义一个React组件
	function Example(){
		return(
	 		<React.Fragment>
        	'这是一个函数组件'
      		</React.Fragment>
	)
}
//抛出
 export default Example;
1.3创建类(class)组件(重点)
import React from 'react';

//定义一个React组件
class Example extends React.Component{
//渲染到页面
  render(){
    return (
     <React.Fragment>
       	'这是一个类组件'
    </React.Fragment>
    );
  }
}
//抛出
export default Example;

注意

  • 组件名称要求大写字母开头,不得出现中文
  • 在返回的值里面必须有且仅有一个盒子在外面包裹着

<React.Fragment></React.Fragment>标签相当于一个空标签没有特殊的含义只是为了不在重复增加盒子,避免出现样式上的问题

1.4函数组件和class组件的区别(了解)
区别函数组件class组件
是否有 this没有
是否有生命周期没有
是否有状态 state没有

注意

  • 使用class 关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;
  • 使用function创建的组件,只有props,没有自己的私有数据和生命周期函数;

2.React核心属性

1.1props属性(重点)

props属性的作用:组件之间的通信

props属性的特点:(了解)
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
4.作用:通过标签属性从组件外 向组件内传递数据(只读 read only)
5.对props中的属性值进行类型限制和必要性限制

代码示例

使用函数(function)组件

在index.js的代码:

//引入react模块
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App {...person}/>, document.getElementById('root'));

在App.js的代码:

import React from 'react';
//使用函数组件
function App(props){
    //在组件中获取props属性值
	return <div>{this.props.name}{this.props.age}</div>
}

//定义数据
const person ={
    name:'三三',
    age:13,
    sex:'男'
}
export default App;

使用类(class)组件

import React from 'react';
import ReactDOM from 'react-dom';

//使用class组件
class User extends React.Component{
    render(){
        return (
    <div>{this.props.name}{this.props.age}</div>
        );
    }
}

//数据
const person ={
    name:'三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));
1.2state属性(重点)
代码实例:
import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
	//构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'san';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

设置状态:setState
setState
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

1.3props属性和state属性的区别(重点)
  • props中的数据都是外界传递过来的;
  • state中的数据都是组件私有的;
  • props中的数据都是只读的,不能重新赋值;
  • state中的数据,都是可读可写的;
  • 子组件只能通过props传递数据;

3.父子组件传值

3.1父传子(重点)

通过props属性,将父组件的state传递给子组件。

代码实例:

index.js代码


import React from 'react';
import ReactDOM from 'react-dom';
//引入父元素
import Father from './Father';

//渲染父元素
ReactDOM.render(<Father />, document.getElementById('root'));

Father.js代码

import React from 'react';
//引入子元素
import Son from './Son';
// 父类
class Father  extends React.Component{
//渲染
 render(){
        return (
            // 固定标签不生成div
            <React.Fragment>
                {/* 使用Son的模板 */}
                <Son sonMess={'sansan'}/>
            </React.Fragment>
        )
    }
}

//暴露模块
export default Father;

Son.js代码

import React from 'react';
class Son extends React.Component{
    render(){
        return(
            <React.Fragment>
            {this.props.sonMess}
            </React.Fragment>
        )
    }
}
export default Son;
3.2子传父(重点)
代码实例:

index.js代码


import React from 'react';
import ReactDOM from 'react-dom';
//引入父元素
import Father from './Father';

//渲染父元素
ReactDOM.render(<Father />, document.getElementById('root'));

Father.js代码

import React from 'react';
import Son from './Son';

//父组件
class Father extends React.Component{
    // 构造函数
    constructor(){
        super();
        this.state = {
            message: ''
        }
    }


    // 声明一个函数,用户接收子组件的传值
    getSonMess(msg){
     //把子组件传递过来的值赋给this.state中的属性
        this.setState({
            mess: msg
        });
    }

    render(){
        return (
            <React.Fragment>
  				<Son getdata={this.getDatas.bind(this)}></Son>
                <div>展示数据:{this.state.mess}</div>
                
            </React.Fragment>
        );
    }

}
//暴露模块
export default Father;

Son.js代码

import React from 'react';

//子组件
class Son extends React.Component{
 	//构造方法
	  constructor(){
        super();
        this.state = {
           mes:''
        }
    }
     handleClick(){
        //通过props属性获取父组件的getdata方法,并将this.state值传递过去
        this.props.getdata(this.state.mes);
    }
    // 渲染
    render(){
        // 返回一个值
        return (
            <React.Fragment>
                <button onClick={this.handleClick.bind(this)}>点击获取数据</button>
            </React.Fragment>
        );
    }

}

export default Son;
3.2兄弟传值(重点)
代码实例:

index.js代码

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father></Father>, document.getElementById('root'));



Farher.js代码

import React from 'react';
import Son from './Son';
import Son2 from './Son2';

//父组件
class Father extends React.Component{

    constructor(){
        super();
        this.state = {
            message:''
        }
    }

    //用于接收Son.js组件的数据函数
    sonDatas(msg){
        this.setState({
            message:msg
        });
        console.log("在Father.js中展示Son.js生成的数据:"+msg);
    }

    render(){
        return (
            <React.Fragment>
               
               <h1>在Father组件中显示:</h1>
               <Son sondata={this.sonDatas.bind(this)}></Son>
               <Son2 mess={this.state.message}></Son2>
            </React.Fragment>
        );
    }

}

export default Father;

Son.js代码

import React from 'react';

//子组件
class Son extends React.Component{

    //按钮点击事件函数
    sonClick(){
        this.props.sondata('这是从Son.js中生成的数据。。。');
    }

    render(){
        return (
            <React.Fragment>
            
                <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
                    
            </React.Fragment>
        );
    }

}

export default Son;

Son2.js代码

import React from 'react';

//子组件
class Son2 extends React.Component{

    render(){
        return (
            <React.Fragment>
                <h1>
                    在Son2.js中展示Son.js中生成的数据,这个是Father.js传过来的,数据是:
                    {this.props.mess}
                </h1>
            </React.Fragment>
        );
    }

}

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值