React 提供了两种方式来声明组件，一种是函数式，一种是类式，就是用es6 class, 我们所有的组件都继承自React.Component.
函数式很简单，就像我们平常写函数一个，接受一个参数作为输入，然后进行相应的输出，只不过它输出的jsx.
// welcome 函数式组件。
function Welcome(props) {
return <h1> {props.name}</h1>
}
类式 写法如下：
class Welcome extends React.Component {
render() {
return <h1> {this.props.name}</h1>
}
}
声明组件以后，怎么使用这个组件？ 如果组件还要接受参数，怎样进行参数传递？把组件名放到一个自闭合html 标签中，进行调用，传参则像是给html标签写属性,属性名 = 属性值，如name =”Jason” , 组件内部的props 则把这些属性组合在一起形成对象｛name: “jason”｝
<Welcome name="Jason" /> // 标签一定要闭合，就是后面的/不能忘记
通过调用，我们返回了 <h1> Jason</h1>, 很像html 代码，其实它是 React 所说的虚拟DOM, 并不是真实的DOM, 我们要把虚拟DOM 渲染成真实的DOM，才能显示到页面中，这需要用到ReactDOM的render 方法，它接受的第一个参数，就是虚拟DOM， 第二个参数就是我们要把DOM 渲染到什么地方。
ReactDOM.render(
<Welcome name="Jason" />,
document.getElementById(‘root‘)
);
这就是react组件最简单的使用，现在写一个html 页面，引入react reactdom 等，可以看到页面中输入了Jason
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// welcome 函数式组件。
function Welcome(props) {
return <h1> {props.name}</h1>
}
// 渲染成真实的DOM
ReactDOM.render(
<Welcome name="Jason" />,
document.getElementById(‘root‘)
);
</script>
</body>
</html>
为了调用简单，我们可以把组件的调用赋值给一个变量，然后在 render 方法中直接使用这个变量作为第一个参数, 这里对name 参数进行了更改，以便看出区别。可以看到页面中输出sam
// 组件的调用结果赋值给一个变量 const nameElem = <Welcome name="sam" /> ReactDOM.render( nameElem, // 在render 中直接使用变量 document.getElementById(‘root‘) );
有时我们还要把小的组件进行组合，形成大的组件，这里也可以用函数声明的方式
// 组件的组合
function App() {
return (
<div>
<Welcome name="Sam" />
<Welcome name="Jason" />
</div>
);
}
对于这样的组件，在调用render 方法进行渲染的时候，要对函数名用html 标签进行包裹，形成一个自闭合标签。
ReactDOM.render( <App />, document.getElementById(‘root‘) );
script 内容更改如下，可以看到页面上输出sam jason
<script type="text/babel">
// welcome 类式组件。
class Welcome extends React.Component {
render() {
return <h1> {this.props.name}</h1>
}
}
// 组件的组合
function App() {
return (
<div>
<Welcome name="Sam" />
<Welcome name="Jason" />
</div>
);
}
ReactDOM.render(
<App />, //自闭合标签
document.getElementById(‘root‘)
);
</script>
时间： 2024-10-14 10:40:09