网页制作与网站建设 在线作业,wordpress主题:yusi v2.0,宾爵手表官方网站,大沥做网站React函数式组件
特点
React函数式组件具有以下特点#xff1a;
简洁#xff1a;使用函数的方式定义组件#xff0c;语法简单直观。无状态#xff1a;函数式组件没有内部状态#xff08;state#xff09;#xff0c;只依赖于传入的props。可复用#xff1a;函数式组…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 (divpCount: {props.name}/ppCount: {count}/pbutton 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 h1Hello, {name}!/h1;
};// 渲染应用
const App () {return ParentComponent /;
};export default App;
