简单组件 和 复杂组件 的概念
如果组件有state（状态）属性，就是复杂组件。
如果没有state（状态）属性，就是简单组件。
state、props、refs是组件实例的三大核心属性，在之后会逐一进行详细地讲述，不了解者可以先跳过，之后再来回看下述内容。
函数式组件
function App() {
return <h1>我是一个函数式组件</h1>
}
以上App函数式组件符合简单组件的定义，因为它没有state。
创建函数式组件，首字母必须大写，必须要有返回值。
函数式组件使用props
在React16.8.0版本之前，函数式组件只能使用三大组件中的props，其他两个属性都使用不了。
因此在16.8.0版本之前函数式组件注定只能是简单组件，应用远不如类式组件。
function App(props) {
const { name, sex, age } = props;
return <h1>我的名字叫做{name}, 性别{sex}, 今年{age}岁</h1>
}
// 将App组件标签渲染到index页面的div上
ReactDOM.createRoot(document.getElementById('root')).render(<App name="cxk" sex="女" age="18" />);
函数式组件中使用state
在16.8.0版本，React推出了新特性/新语法：Hook。
可以让你在函数组件中使用state以及其他的React特性，改变了函数组件拉胯的地位。
使用其中的 State Hook 可以让函数组件使用state。
useState：
import React, { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>点击了{count}次</h1>
<button onClick={ () => setCount(count + 1) }>+1</button>
</>
)
}
- 语法：
- const [xxx, setXxx] = React.useState(initValue)；// initValue是xxx的初始值，setXxxx是用来设置xxx值的函数
- useState()说明：
- 参数：第一次初始化的值
- 返回值：第一个是内部当前的状态值，第二个是更新这个状态值的函数
- setXxx()的2种写法：
- setXxx(newValue)：参数为非函数值，直接指定新的状态值，覆盖旧的状态值
- setXxx(value => newValue)：参数为函数，可以接收到原本的旧的状态值作为参数，函数的返回值newValue会覆盖旧的状态值
函数式组件中使用refs
使用其中的 Ref Hook 可以让函数组件使用refs。
useRef：
import React, { useRef } from "react";
export default function App() {
const inputEl = useRef(null);
const onButtonClick = () => {
console.log(inputEl.current);
inputEl.current.focus();
}
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
)
}
- 语法：
- const inputEl = useRef(initialValue) // useRef返回一个可变的ref对象，对象的current属性初始化为initialValue
如果input不是个普通的dom元素，而是个组件，该怎么办呢？
使用forwardRef将input封装成一个组件TextInput。
import React, { useRef, forwardRef} from "react";
const TextInput = forwardRef((props, ref) => {
return <input ref={ref} type="text"></input>
});
export default function App() {
const inputEl = useRef(null);
const onButtonClick = () => {
console.log(inputEl.current);
inputEl.current.focus();
}
return (
<>
<TextInput ref={inputEl}></TextInput>
<button onClick={onButtonClick}>Focus the input</button>
</>
)
}