React中创建组件 --Y.

第1种 - 创建组件的方式

---

使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用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.在导入组件的时候，配置和使用@路径符号

第2种 - 创建组件的方式

---

使用 class 关键字来创建组件

• ES6 中 class 关键字，是实现面向对象编程的新形式；

• 了解ES6中 class 关键字的使用

  1. class 中 constructor 的基本使用
  2. 实例属性和实例方法
  3. 静态属性和静态方法
  4. 使用 extends 关键字实现继承

基于class关键字创建组件

• 最基本的组件结构：

  // 如果要使用 class 定义组件，必须 让自己的组件，继承自 React.Component
  class 组件名称 extends React.Component {
      // 在 组件内部，必须有 render 函数,作用：渲染当前组件对应的 虚拟DOM结构
      render(){
      // render 函数中，必须 返回合法的 JSX 虚拟DOM结构
      return <div>这是 class 创建的组件</div>
    }
 }

两种创建组件方式的对比

注意：使用 class 关键字创建的组件，有自己的私有数据（this.state） 和 生命周期函数；

注意：使用 function 创建的组件，只有props，没有自己的私有数据和 生命周期函数；

1. 用构造函数创建出来的组件：叫做“无状态组件”【无状态组件今后用的不多】
2. 用class关键字创建出来的组件：叫做“有状态组件”【今后用的最多】

3. 什么情况下使用有状态组件？什么情况下使用无状态组件？

   • 如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件；
   • 如果一个组件不需要有私有的数据，则推荐使用：无状态组件；

   • React官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比 有状态组件稍微高一些；

   • 有状态组件和无状态组件之间的本质区别就是：有无state属性、和 有无生命周期函数；

4. 组件中的 props 和 state/data 之间的区别

   • props 中的数据都是外界传递过来的；
   • state/data 中的数据，都是组件私有的；（通过 Ajax 获取回来的数据，一般都是私有数据）；
   • props 中的数据都是只读的；不能重新赋值；
   • state/data 中的数据，都是可读可写的；