React 组件介绍

React 组件 props 属性和 state 属性

      内容大纲：

                     1、React 组件
                     2、props 属性
                     3、state 属性
                     4、props和state属性的区别
                     5、refs属性
                     6、父子组件传值
                     7、兄弟组件传值

一、React 组件

      1.1 React概述

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑简单，越来越多的人已开始关注和使用它。

      1.2 React组件概述

通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
使用React 组件使得我们的应用更容易来管理。

      1.3 React 组件的创建

            1.3.1 使用函数定义了一个组件

// 使用函数定义了一个组件
import React from 'react';
function User(){
   
    return (
        <div>hello user</div>
    );
};
export default User;

            1.3.1 使用 ES6 class 来定义一个组件

// 使用函数定义了一个组件
import React from 'react';
class Person extends React.Component {
   
  render() {
   
    return (
    	<div>
			<h1>Hello Person!</h1>
		</div>
	);
  }
}
export default User;

注意：

• 组件类只能包含一个顶层标签，有别的也会报错。
• 创建的组件最好以大写字母开头 ，文件以及名字最好大小写一致

二、props属性

      2.1 props属性概述

props属性用于组件之间的通信
子组件的props元素接收父组件传递的值，用this.props就可以调用传递过来的值
react中说的单向数据流值说的就是props，props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

      2.2 props属性的基础用法

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
var obj={
   
    name : 'tom',
    age : 10,
    sex : '男'
};
ReactDOM.render(<Parent {
   ...obj}></Parent>, document.getElementById('root'));

Parent.js页面

import React from 'react';
import User from './User';
class Person extends React.Component{
   
    render(){
   
        return(
            <div>
                <p>Person展示：{
   this.props.name}，{
   this.props.age}，{
   this.props.sex}<