React的元素和组件用法详解！

一、元素

React 的最小单位是元素，一旦创建，其子元素、属性等都无法更改。

// 假设  HTML  文件中有个元素：


// 创建element元素，传递给React渲染，并加载到父容器(id=root)下
const element = 
Hello, world
;
ReactDOM.render(element, document.getElementById('root'));

---

二、组件

组件是有多个元素组成，可以分为 class组件 和 函数组件 。

1、class组件

// class组件
class Welcome extends React.Component {
    render() {
        return 
Hello, {this.props.name}
;
    }
}

2、函数组件

// 普通函数 写 函数组件
function Welcome(props) {
    return 
Hello, {props.name}
;
}

// 箭头函数 写 函数组件
const Welcome = (props) => {
    return 
Hello, {props.name}
;
}

3、组件复用

// 组件App多次复用Welcome
function Welcome(props) {
    return 
Hello, {props.name}
;
}

function App() {
    return (
        

            
            
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

4、动态构建组件

根据条件，创建不同组件。

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return ;
    }
    return ;
}

ReactDOM.render(
    // Try changing to isLoggedIn={true}:
    ,
    document.getElementById('root')
);

5、map遍历构建元素

// 用数组动态构建组件
function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        

            {number}
        
    );
    return (
        
{listItems}
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    ,
    document.getElementById('root')
);

---

三、组件的属性及方法

详情，看这里!

---

四、参考链接：

• React的元素和组件用法详解！