React组件详细介绍

1.编写react应用程序

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
  <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
  document.getElementById('root')
)

2.创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用props来接收；

必须要向外return一个合法的JSX创建的虚拟DOM；

• 创建组件：

      function Hello () { 
        // return null 
        return <div>Hello 组件</div>
      }

• 为组件传递数据：

// 使用组件并 为组件传递 props 数据
      <Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

      // 在构造函数中，使用 props 形参，接收外界 传递过来的数据
      function Hello(props) {
        // props.name = 'zs'
        console.log(props)
        // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；

        return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
      }

1. 父组件向子组件传递数据
2. 使用{…obj}属性扩散传递数据
3. 将组件封装到单独的文件中
4. 注意：组件的名称首字母必须是大写
5. 在导入组件的时候，如何省略组件的.jsx后缀名：

// 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：
       resolve: {
           extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
           alias: {
               '@': path.join(__dirname, './src')
           }
         }

6. 在导入组件的时候，配置和使用@路径符号

3.组件的props属性、state属性的用法和特点

• State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
• Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

props属性：

我使用代码来说明React中props属性：

// Profile.jsx
import React from 'react' ;
export default Class Profile extends React.Component {
    // render 是这个组件渲染的Vitrual DOM结构
    render() {
        return (
            <div className-"profile-component">
                </*this.props就是传入的属性*/>
                <h1>my name is {this.props.name}</h1>
                <h2>my age is {this.props.age}</h2>
            </div>
        )
    }
}

用这种方式，就实现了一个React的组件，在其他的组件中，可以像HTML标签一样引用它。有了组件以后，可以使用React提供的另外一个库ReactDOM把这个组件挂载到DOM节点上。

state状态:

state是组件内部的属性。组件本身是一个状态机，它可以在constructor中通过this.state直接定义它的值，然后根据这此值来渲染不同的UI。当state的值发生改变时，可以通过this.setState方法让组件再次调用render方法来渲染新的UI。

//Profile.jsx
export default class Profile extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      liked: 0
    };
    this.likedCallback = this.likedCallback.bind(this);
  }
  likedCallback() {
    let liked = this.state.liked;
    liked++;
    this.setState({
      liked
    });
  }

  render() {
    return (
      <div>
        <h1>我的名字叫{this.props.name}</h1>
        <h2>我今年{this.props.age}</h2>
        <button onClick={this.likedCallback}>点赞</button>
        <h2>总点赞数：{this.state.liked}</h2>
      </div>
    )
  }
}

和上面描述的一样，在constructor中添加this.state的定义，每次单击按钮以后调用回调函数，给当前liked值加1,然后更新this.setState完成UI的重新渲染。因为在ES6 class 类型的component组件声明方式中，不会把一些自定义的callback函数绑定到实例上，所以需要手动在constructor里面绑定。

this.likedCallback = this.likedCallback.bind(this);

4.组件之间的传值（父传子、子传父、兄弟传值）

1. 父组件向子组件传值
   父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数
   （1）父组件（直接定义一个属性传值即可）
   
   （2）子组件（通过this.props.父组件定义的属性 来接收父组件传递过来的参数）
   
   2、子组件向父组件传值
   （1）父组件
   
   ( 2）子组件（通过this.props.事件名(参数)的方式向父组件传递参数
   
   3、兄弟组件之间的传值
     两个兄弟组件之间会有一个共同的父组件，我们都是结合父子传值的方式来实现兄弟之间的传值的，即先其中一个子组件（兄弟组件）向父组件传值，然后父组件接收到这个值之后再将值传递给另外一个子组件（兄弟组件）