react学习—组件和组件属性

一、组件

1、函数组件

返回一个React元素
可以将函数组件直接在表达式中执行。（不推荐）

function MyFuncComp(){
  return <h1>h1标签</h1>
}
ReactDOM.render(<div>{MyFuncComp()}</div>, document.getElementById('root'));

因为这种形式我们无法观察到它是否是一个组件。

如果以标签的形式执行呢？

function MyFuncComp(){
  return <h1>h1标签</h1>
}
ReactDOM.render(<MyFuncComp />, document.getElementById('root'));

function MyFuncComp(){
  return <h1>h1标签</h1>
}
const comp = <MyFuncComp />
ReactDOM.render(comp, document.getElementById('root'));

此时我们通过前面安装的组件就能够准备分辨该元素是一个组件。


特别注意：组件的名称首字母必须大写

const comp = <myFuncComp />
ReactDOM.render(comp, document.getElementById('root'));

会认为你只是页面上有一个普通的react元素。

另外一点：

import React from 'react';

export default function (){
  return <h1>h1标签</h1>
}

此外如果我们导出的组件为匿名函数时，引入时会不显示名字。

2、 类组件

//MyClassComp.js
import React from 'react'
//import React, { Component } from 'react' 或者具名导入
export default class MyClassComp extends React.Component {
  render (){
    return <p>p标签</p>
  }
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyFuncComp from './MyFuncComp';
import MyClassComp from './MyClassComp';

ReactDOM.render(<div>
  <MyFuncComp />
  <MyClassComp />
  </div>, document.getElementById('root'));

二、属性

1、函数组件的属性

对于函数组件，属性会作为一个对象的属性，传递给函数的参数
注意：组件的属性，应该使用小驼峰命名法

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyFuncComp from './MyFuncComp';

ReactDOM.render(<div>
  <MyFuncComp num='2' />
  <MyFuncComp num={2} />
  </div>, document.getElementById('root'));

//MyFuncComp.js
import React from 'react';

export default function MyFuncComp(props){
  console.log(props);
  return <h1>h1标签{props.num}</h1>
}

2、类组件的属性

属性会作为一个对象的属性，传递给构造函数的参数

//MyClassComp.js
import React from 'react'
export default class MyClassComp extends React.Component {
  constructor(props){//es6，首先是调用super继承
    super(props);//隐式this.props=props
    console.log(props,this.props);
  }//这里只是说明属性值是如何拿到的，实际不需要写constructor，react内部会完成
  render (){
    return <p>p标签{this.props.num}</p>
  }
}

也可以传其他的参数等。

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyClassComp from './MyClassComp';

ReactDOM.render(<div>
  <MyClassComp num='2' disabled/>
  <MyClassComp num={2} />
  </div>, document.getElementById('root'));

甚至于进行一些复杂的逻辑等。

//MyClassComp.js
import React from 'react'
export default class MyClassComp extends React.Component {
  render() {
    if (this.props.obj) {
      return (
        <>
          <p>
            姓名：{this.props.obj.name}
          </p>
          <p>
            年龄：{this.props.obj.age}
          </p>
        </>
      );
    }
    else if (this.props.ui) {
      return (
        <div>
          <h1>下面是传入的内容</h1>
          {this.props.ui}
        </div>
      );
    }
    return <h1>类组件的内容，数字：{this.props.num}</h1>
  }
}

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyClassComp from './MyClassComp';

ReactDOM.render(<div>
  <MyClassComp num='2' disabled/>
  <MyClassComp num={2} obj={{
        name: "jimo",
        age: 18
    }}/>
  <MyClassComp num={2} ui={<span>这是我传递属性</span>}/>
  </div>, document.getElementById('root'));

3、组件无法改变自身的属性

React中的数据，自顶而下流动

//MyClassComp.js
import React from 'react'
export default class MyClassComp extends React.Component {
  render() {
    this.props.num = 100;
    ......
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import MyClassComp from './MyClassComp';

ReactDOM.render(<div>
  <MyClassComp num='2' disabled/>
  <MyClassComp num={2} obj={{
        name: "jimo",
        age: 18
    }}/>
  <MyClassComp num={2} ui={<span>这是我传递属性</span>}/>
  </div>, document.getElementById('root'));

但是这里react其实并不能深度监听属性的变化

import React from 'react'
export default class MyClassComp extends React.Component {
  constructor(props) {
    super(props);
    console.log(props, this.props);
  }
  render() {
    if (this.props.obj) {
      this.props.obj.name = 'change';
	  ......
    }
  }

但是千万不能这么去做，React中的哲学：数据属于谁，谁才有权力改动

这里可能我们联想到在JSX章节中我们说的元素的不可变性，那他们之间有什么联系吗？

const comp = <MyClassComp num={3} />
const div = <div title="title"></div>
console.log(comp);
console.log(div);

之前学习的React元素，本质上，就是一个组件（内置组件）

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！