关于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;