React函数式组件
特点
React函数式组件具有以下特点:
- 简洁:使用函数的方式定义组件,语法简单直观。
- 无状态:函数式组件没有内部状态(state),只依赖于传入的props。
- 可复用:函数式组件易于复用,可以在多个地方使用相同的组件函数。
- 易于测试:函数式组件是纯函数,只依赖于输入的props,因此易于编写测试用例。
React提供了Hooks作为函数式组件的扩展,它们使函数式组件能够拥有状态和其他特性,例如使用useState来管理组件的状态、使用useEffect来处理副作用等。(注:副作用的来源:配置文件、用户的输入、数据库等等,所有的外部交互都有可能产生副作用,副作用会给程序带来安全隐患和不确定性,要尽可能的控制副作用在可控制的范围内发生。)
以下是一个使用Hooks扩展函数式组件的示例
useState, useEffect
import React, { useState, useEffect } from 'react';function Counter(props) {const [count, setCount] = useState(0); //第一个为变量名,第二个参数为修改的方法useEffect(() => { //相当于监听document.title = `Count: ${count}`;}, [count]); //指定要监听的变量,发生变化后会执行第一个参数(函数)//什么也不传的话,每一个useState变量变化都会执行//传入空数组[]的话,只会在页面挂载的时候执行return (<div><p>Count: {props.name}</p><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}
在上面的示例中,我们使用useState来创建了一个名为count的状态变量,并使用setCount函数来更新状态。我们还使用了useEffect来在组件渲染后更新文档标题,并在count发生变化时进行更新。
通过 useContext 获取上下文的值(在父组件ParentComponent中,我们将需要共享的数据 name通过 MyContext.Provider 提供给子组件。)
import React, { createContext, useContext } from 'react';// 创建一个上下文
const MyContext = createContext();// 父组件
const ParentComponent = () => {const name = 'John';return (<MyContext.Provider value={name}><ChildComponent /></MyContext.Provider>);
};// 子组件
const ChildComponent = () => {// 使用 useContext 获取上下文的值const name = useContext(MyContext);return <h1>Hello, {name}!</h1>;
};// 渲染应用
const App = () => {return <ParentComponent />;
};export default App;