创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

1.创建组件的方法   函数组件   class组件

1.1 函数组

无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下

 import React from 'react ';

 //定义一个React组件
 function App() {
   return (
     <div>
       hello React...
     </div>
   );
 }

 export default App;

1.1 class组件

`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下

 import React from 'react';

 //定义一个React组件
 class App extends React.Component{
   render(){
     return (
       <div>
         Hello，Reactjs！！
       </div>
     );
   }
 }

 export default App;

 在其他文件中引用组件

 import React from 'react';
 import ReactDOM from 'react-dom';
 //App组件，组件要求大写字母开头
 import App from './App';

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

2.组件的props属性

2.1  概念 :react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

2.2    `props`属性的特点

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

2.3  代码示例

使用函数组件：

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

 //使用函数组件
 function User(props){
     //在组件中获取props属性值
     return <div>{props.name}，{props.age}</div>
 }

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

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

使用类组件：

 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:,
     sex:'男'
 }

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

3.state属性的用法和特点

3.1

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

3.2代码示例：

 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 = 'jack';
         return (
         <h1>{this.state.name}</h1>
         );
     }
 }

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

4.父子组件传值

4.1父组件传值子组件

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到      这个param的值。

父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。

代码如下- 父组件代码片段：

 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>
     )
 }

完整示例：创建父组件index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import User from './User';//引入子组件

 //定义数据
 const person = {
     name: 'Tom',
     age:
 }

 ReactDOM.render(
     //渲染子组件，并向子组件传递name,age属性
     <User name={person.name} age={person.age}></User>
     , document.getElementById('root'));

创建子组件 :User.js

 import React from 'react';

 class User extends React.Component{
     render(){
         return (
             // 使用props属性接收父组件传递过来的参数
             <div>{this.props.name}，{this.props.age}</div>
         );
     }
 }

 export default User;

5.兄弟组件传值

兄弟组件之间的传值，是通过父组件做的中转 ，流程为：

**组件A** -- `传值` --> **父组件** -- `传值` --> **组件B**

代码示例：创建Aclis.js 组件,用于提供数据

 import React from 'react';

 class Acls extends React.Component {
     //按钮点击事件，向父组件Pcls.js传值
     handleClick(){
         this.props.data("hello...React...");
     }

     render(){
         return (
             <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
         );
     }
 }

 export default Acls;

创建父组件 `Pcls.js` 用于中转数据

 import React from 'react';
 import Acls from './Acls';
 import Bcls from './Bcls';

 class Pcls extends React.Component {
     //构造函数
     constructor(){
         super();
         this.state = {
             mess: ''
         }
     }
     //向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
     getDatas(data){
         this.setState({
             mess: data
         });
     }

     render(){
         return (
             <React.Fragment>
                 Pcls组件中显示按钮并传值：
                 <Acls data={this.getDatas.bind(this)}></Acls>
                 <Bcls mess={this.state.mess}></Bcls>
             </React.Fragment>
         );
     }
 }

 export default Pcls;

创建子组件 `Bcls.js` 用于展示从 `Acls.js` 组件中生成的数据

 import React from 'react';

 class Bcls extends React.Component {

     render(){
         return (
             <div>在Bcls组件中展示数据：{this.props.mess}</div>
         );
     }
 }

 export default Bcls;