React的元素和组件用法详解

一、元素

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

// 假设  HTML  文件中有个元素：
<div id="root"></div>

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

---

二、组件

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

1、class组件

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

2、函数组件

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

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

3、组件复用

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

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

4、动态构建组件

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

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}

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

5、map遍历构建元素

// 用数组动态构建组件
function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>
            {number}
        </li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
);

---

三、组件的属性及方法

详情，看这里!

---

四、参考链接：

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