recat组件介绍

1.组件介绍

1.1 React中组件主要可分为函数组件和类组件，两者区别是函数组件没有state和生命周期，故函数组件也称为 stateless functional components， 适用于仅进行简单渲染操作的组件。

1.2 函数组件是：

	**1   引入React模块**

	** 2    声明函数 function 组件名(){  return jsx }**

      **3	向外暴露  export default 组件名**

例：

import React from 'react';

function ReactHeader() {
   
  return jsx
}
export default 组件名;

1.3 类组件是：

步骤：
class组件

1.引入React模块

2.声明类  class 组件名  extends React.Component{  render(){  return   jsx  }   }

3.向外暴露  export default 组件名

例：

import React from 'react';
class Father extends React.Component{
   
	 render(){
   
        return (
            <React.Fragment>
             jsx
            </React.Fragment>
        );
    }

}

export default Father;

2.父传子组件：

父–传—>子: 用props属性

例：
父组件：

constructor(props){
   
    super(props)
    this.state={
   
      message:"i am from parent"
    }
  }
  render(){
   
    return(
          <Child txt={
   this.state.message}/>
    )
  }
}

子组件：

render(){
   
    return(
          <p>{
   this.props.txt}</p>
    )
  }

整体效果：

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

class Parent extends React.Component {
   
  constructor(props