一、元素
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')
);
三、组件的属性及方法
详情，看这里!
