React中创建组件

第1种 - 创建组件的方式

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

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

创建组件：

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

为组件传递数据：

// 使用组件并 为组件传递 props 数据
   const element = <Hello name={person.name} age={person.age} gender={person.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>
}
const person={
name:'张三',
age:18,
gender:'男'
}
//渲染组件
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

父组件向子组件传递数据
使用{…obj}属性扩散传递数据
将组件封装到单独的文件中
注意：组件的名称首字母必须是大写

在导入组件的时候，如何省略组件的.jsx后缀名：

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

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

第2种 - 创建组件的方式

使用 class 关键字来创建组件

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

了解ES6中 class 关键字的使用

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

基于class关键字创建组件

最基本的组件结构：

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

2. 两种创建组件方式的对比

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

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

用构造函数创建出来的组件：叫做“无状态组件”【无状态组件用的不多】
用class关键字创建出来的组件：叫做“有状态组件”【今后用的最多】
什么情况下使用有状态组件？什么情况下使用无状态组件？
- 如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件；
- 如果一个组件不需要有私有的数据，则推荐使用：无状态组件；
- React官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比有状态组件稍微高一些；

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

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

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

React中创建组件的两种方式及两种创建组件方式的对比

React中创建组件

第1种 - 创建组件的方式

第2种 - 创建组件的方式

了解ES6中 class 关键字的使用

基于class关键字创建组件

2. 两种创建组件方式的对比

猜你喜欢