一、props 组件传参
1. props 基本使用
我们在使用组件时可以向组件传递数据，在组件内可以使用 props 对象来调用传入的数据。
function Person(props) {
return <div>
<h3>姓名：{props.name}</h3>
<h3>年龄：{props.age}</h3>
</div>;
}
export default function () {
return <Person name='zhangsan' age='20'></Person>;
}
直接在组件定义中传入 props 参数，使用组件时直接在属性列表中就可以使用了，props 即为传入的参数组成的对象。
注意：
- props 是只读的，组件内不能修改 props。
- 如果 props 的数据源被修改，那组件内得到的 props 数据也会随着修改，即数据驱动 DOM。
2. 设置 props 初始值
(1) 设置 defaultProps
可以给组件设置 defaultProps 属性的方式来设置 props 的初始值。
function Person(props) {
return <div>
<h3>姓名：{props.name}</h3>
<h3>年龄：{props.age}</h3>
</div>;
}
Person.defaultProps = {
age: 25
};
export default function () {
return <Person name='zhangsan'></Person>;
}
这里我们给 Person 组件设置了 age 参数的默认值为25，传递参数时没有传 age，页面上的 age 就为默认的25。
(2) 使用解构语法
使用 es6 的解构语法可以轻松拆分 props 并设置默认值。
function Person({ name, age = 30 }) {
return <div>
<h3>姓名：{name}</h3>
<h3>年龄：{age}</h3>
</div>;
}
export default function () {
return <Person name='zhangsan'></Person>;
}
使用解构语法提取出 props 中的 name 和 age，并为 age 属性设置了默认值为30。
注意：使用解构语法，在获取 props 中的 name 属性时直接写 name，而不需要 props.name。
3. props.children
props.children 是我们在调用组件时，填充在组件标签中的内容。
function Person(props) {
return (
<div>
<h3>hello world</h3>
{props.children}
</div>
);
}
export default function () {
return (
<Person>
<h3>hello web</h3>
<h3>hello</h3>
</Person>
);
}
这里我们给 Person 标签内传入了一个 h3 标签，在 Person 组件中通过 props.children 获取到并渲染到页面上。
props.children 的内容如下：
可以看到， props.children 是一个由传入的标签组成的虚拟 DOM 数组。
props 的注意事项：
- props 用于传递数据，这个数据是单向传递，从父组件传递给子组件，逆向传递是不被允许的。
- 子组件如果想修改父组件的状态，需要父组件给子组件传递事件方法。
4. 传递事件方法
使用组件时可以以参数的形式传递事件方法给子组件，子组件可以直接使用。
function Person(props) {
function click() {
console.log(props.onEvent());
}
return (
<div>
<button onClick={click}>事件点击</button>
</div>
);
}
export default function () {
function click() {
return '我来自于父组件';
}
return (
<Person onEvent={click}></Person>
);
}在这个案例中，我们传递了一个 click 方法给子组件，子组件中在自己的 click 方法中调用父组件传来的 click 方法。点击按钮时，控制台会打印出 “我来自于父组件”。
二、state 状态管理
组件通常需要根据用户交互更改页面上显示的内容，使用普通的变量来渲染数据，在变量改变时并不会触发页面改变。这时就需要使用 state 来记录动态数据的状态，在 state 更新时进行页面渲染修改数据。
如以下计数器案例：
function Counter() {
let count = 0;
function add() {
count++;
}
return (
<div>
<h3>{count}</h3>
<button onClick={add}>+</button>
</div>
);
}
export default function () {
return (
<Counter />
);
} 
count 是一个普通变量，点击按钮 count 变量自增，但并不会触发页面重新渲染，因此点击按钮不会起作用。
1. useState Hook 的使用
要添加 state 变量，需要先导入 useSate。
import { useState } from 'react';下面是修改后的计数器应用：
function Counter() {
const [count, setCount] = useState(0);
function add() {
setCount(count + 1);
}
return (
<div>
<h3>{count}</h3>
<button onClick={add}>+</button>
</div>
);
}
export default function () {
return (
<Counter />
);
}在这个案例中，我们使用 const [count, setCount] = useState(0) 定义了一个 state 变量 count，默认值为0。其中，count 为 state 变量，setCount 为 count 的 setter 方法，用于设置 count 变量新的状态值。在点击按钮时调用 setCount 方法设置 count 为 count 自增后的值。
需要注意，state 变量是只读的，修改它的值需要使用 setCount 方法。
