一、组件特点
- 可以是一个方法，也可以是一个 class（类）
- 可以在 js 或 jsx 文件中直接写一段html作为一个组件，也可以写成一个单独的jsx或者js文件
- 组件名需首字母大写
function App (){
return(
<div>app</div>
)
}
class Hello extends React.Component{
render() {
return (<div> hello </div>)
}
}
二、jsx
jsx 的特点
- 可以写在js或者jsx文件中，rc会使用webpack的babel进行编译
- 写法接近js，不同于js的是，jsx可以很方便的写html在js中
jsx 总结
- jsx 中使用表达式、条件渲染、列表渲染、样式、事件处理等特性，可以在组件中更方便地编写复杂的 UI 逻辑和交互行为
- jsx 是 React 的核心特性之一，也是 React 组件开发的基础
- jsx 的语法虽然看起来像 HTML，但它实际上是 JavaScript 的一种语法扩展，最终会被编译成 React.createElement() 调用来创建 React 元素
- jsx 的使用可以让我们在 JavaScript 中直接编写 HTML 结构，使得组件的定义更加直观和易于理解
- jsx 中使用 className 来指定元素的类名
- jsx 中使用 style 属性来指定元素的内联样式
- jsx 中使用 onClick 等事件处理属性来绑定事件处理函数
- jsx 中使用表达式时需要用花括号 {} 包裹
- jsx 在列表渲染时需要为每个元素指定一个唯一的 key 属性，以便高效地更新和重用元素，避免不必要的重新渲染和性能损失
- jsx 中直接插入用户输入的内容时需要进行适当的转义和过滤，以防止 XSS 攻击等安全漏洞
jsx 使用示例
1、jsx 基础写法
const element = <h1>Hello, world!</h1>;
2、jsx 中使用表达式
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
3、jsx 中使用函数
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = { firstName: 'Harper', lastName: 'Perez' };
const element = <h1>Hello, {formatName(user)}!</h1>;
4、jsx 中使用条件渲染
const isLoggedIn = true;
const element = (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
</div>
);
5、jsx 中使用列表渲染
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
const element = (
<ul>
{listItems}
</ul>
);
6、jsx 中使用样式
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray',
padding: '10px',
borderRadius: '5px'
};
const element = <div style={divStyle}>Styled div</div>;
7、jsx 中使用类名
const element = <div className="my-class">Hello, world!</div>;
8、jsx 中使用组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
9、jsx 中使用 Fragment 包裹多个元素
const element = (
<>
<h1>Fragment Example</h1>
<p>This is a fragment.</p>
</>
);
10、jsx 中使用事件处理
function handleClick() {
alert('Button clicked!');
}
const element = <button onClick={handleClick}>Click me</button>;
11、jsx 中使用条件渲染和列表渲染
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
12、jsx 中使用函数组件和类组件
import React from 'react';
function FunctionComponent() {
return <h1>This is a function component.</h1>;
}
class ClassComponent extends React.Component {
render() {
return <h1>This is a class component.</h1>;
}
const element = (
<div>
<FunctionComponent />
<ClassComponent />
</div>
);
