低价自适应网站建设,中国建筑装饰网注册用户名,视频网站开发源码,建筑装饰一般工资多少目录 react组件分类
函数组件
创建函数组件的注意点
代码示例
函数组件的优点
类组件
创建类组件的注意点
代码示例
类组件的优点
有状态和无状态组件的区别
组件样式
行内样式
外链样式
css in js解决方案 react组件分类
在React中#xff0c;有三种主要类型的…目录 react组件分类
函数组件
创建函数组件的注意点
代码示例
函数组件的优点
类组件
创建类组件的注意点
代码示例
类组件的优点
有状态和无状态组件的区别
组件样式
行内样式
外链样式
css in js解决方案 react组件分类
在React中有三种主要类型的组件
1. 函数组件Function Components函数组件是使用函数定义的组件。它们接受输入参数称为props并返回一个React元素。函数组件没有自己的状态state也没有生命周期方法。它们通常用于描述无状态的、纯展示型的组件。
2. 类组件Class Components类组件是使用ES6类语法定义的组件。它们是React组件的一种常用形式可以包含状态state和生命周期方法。类组件必须扩展React.Component类并实现render()方法该方法返回一个React元素。
3. 无状态函数组件Stateless Functional Components无状态函数组件是函数组件的一种特殊形式它们没有内部状态state。这种组件类型的定义方式更简洁只接收props并返回一个React元素。它们适用于纯展示型的简单组件。无状态函数组件在React 16.8版本之后引入的React Hooks之后变得更加常见和强大。
函数组件
函数组件Function Components是React中定义组件的一种方式它是一种纯粹的JavaScript函数。函数组件接收props作为参数并返回一个React元素来描述组件的输出。
函数组件是一种简单、轻量级的组件形式适用于无状态的、只根据输入props进行渲染的组件。它们没有自己的内部状态state和生命周期方法也不使用this关键字。相比于类组件函数组件的语法更简洁代码量更少。
创建函数组件的注意点
函数的首字母必须要大写(这是规定让别人能够区分这是一个组件并不是一个普通函数) 函数中必须要返回React元素(JSX)
代码示例
// 创建一个函数组件
const App props (div classNameapp-rooth1欢迎学习react/h1p这是一个react函数组件/p/div
)
// 导出这个组件
export default App;
函数组件的优点 简洁性函数组件的定义方式更简单代码量更少适用于简单的UI渲染没有复杂的状态和生命周期要处理。 性能优化由于函数组件没有内部状态和生命周期方法它们在某些情况下可以比类组件更轻量级、更高效。 易于测试函数组件是纯函数只依赖于输入的props并返回输出没有副作用。这使得它们更容易编写和测试。
如果需要在组件中使用内部状态、生命周期方法或其他React特性或者需要进行复杂的逻辑处理那么应该使用类组件。但是在React 16.8及以后的版本可以使用Hooks API在函数组件中使用状态和其他React功能使函数组件变得更强大和灵活。
类组件
类组件指的是在React中使用ES6 class语法来定义的组件。类组件通过扩展React.Component类来创建可以包含内部状态state、生命周期方法和其他功能。
在类组件中通过构造函数constructor来初始化内部状态通过生命周期方法componentDidMount、componentDidUpdate、componentWillUnmount等来进行特定的操作例如发起网络请求、订阅/取消订阅事件等通过渲染方法render来返回一个React元素来描述组件的输出。
创建类组件的注意点
我们创建的组件必须要继承React.Component这个父类 必须要有render方法 render方法中必须要返回React元素(JSX)
注意组件名的首字母必须大写。这是为了和普通的html标签区别开
代码示例
class Welcome extends React.Component {constructor(props) {super(props);this.state {count: 0};}componentDidMount() {console.log(Component mounted.);}componentDidUpdate(prevProps, prevState) {console.log(Component updated.);}componentWillUnmount() {console.log(Component will unmount.);}render() {return h1Hello, {this.props.name}!/h1;}
}
在上面的示例中Welcome是一个类组件。它扩展了React.Component类并定义了构造函数constructor、生命周期方法componentDidMount、componentDidUpdate和componentWillUnmount和渲染方法render 构造函数在构造函数中我们通过super(props)调用父类的构造函数然后初始化内部状态count为0。 生命周期方法在示例中我们使用了几个常见的生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount。这些方法可用于在组件的不同生命周期阶段执行特定的操作例如发起网络请求、订阅/取消订阅事件等。 渲染方法render方法是必须的它负责返回一个React元素来描述组件的输出。在示例中render方法返回一个包含问候语的标题元素h1。
类组件的优点 灵活性类组件可以管理内部状态、处理生命周期、引入各种方法和功能更适合处理复杂的逻辑和交互。 扩展性类组件可以通过继承和复用来构建更复杂的组件层次结构。
有状态和无状态组件的区别
有状态组件和无状态组件的主要区别在于是否管理内部状态和是否使用生命周期方法。
1. 有状态组件Stateful Components
管理内部状态有状态组件可以通过state属性来管理内部状态。这意味着它可以保存和改变数据并通过setState方法触发UI更新。有状态组件通常用于存储和操作数据以及处理用户交互。使用生命周期方法有状态组件可以使用生命周期方法来处理特定的阶段和事件。例如componentDidMount在组件加载后调用componentDidUpdate在组件更新后调用componentWillUnmount在组件卸载前调用等。生命周期方法用于处理组件的生命周期和执行特定的操作例如发起网络请求、订阅/取消订阅事件等。
2. 无状态组件Stateless Components
不管理内部状态无状态组件没有内部状态。它们只接收来自父组件的属性props作为输入并根据这些属性渲染UI。无状态组件通常用于展示静态内容没有自己的数据和状态。不使用生命周期方法无状态组件没有生命周期方法。它们不会在特定的阶段和事件上执行任何操作或处理逻辑。无状态组件仅关注UI的呈现根据传入的属性props渲染并返回React元素。
无状态组件相对于有状态组件具有以下优点
简洁无状态组件没有内部状态和生命周期方法代码相对简单易于理解和维护。性能优化由于没有状态的变化无状态组件可以更好地进行优化。React可以更轻松地对其进行渲染和重用并且消耗更少的内存。可复用性无状态组件不依赖于特定的数据和状态更易于复用并且可以更容易地在组件层次结构中移动和组合。
总之有状态组件适用于复杂的逻辑和交互需要管理内部状态和使用生命周期方法。无状态组件适用于简单的UI呈现不需要内部状态和生命周期方法。根据具体的应用场景和需求可以选择合适的组件类型来开发。
组件样式
行内样式
想给虚拟dom添加行内样式需要使用表达式传入样式对象的方式来实现。 React推荐我们使用行内样式因为React觉得每一个组件都是一个独立的整体
{ /* 注意这里的两个花括号第一个表示我们在要JSX里插入JS了第二个是对象的花括号 */
}
p style{{color:#c00, fontSize:14px}}这是一个react函数组件/p 行内样式需要写入一个样式对象而这个样式对象的位置可以放在很多地方。例如 render 函数里、组件原型上、外链 js 文件中 外链样式
将css样式写在一个单独的css文件中然后在通过 import 导入
/* App.css */
.title {background: #ff0;
}
// App.js
import ./App.css;
div classNametitle欢迎学习React/div
css in js解决方案
css in js 解决方案其实就是将css样式写在js文件里面的一种技术 现在比较热门的 css in js 解决方案的库有以下三种
aphrodite目前github上有4k的star radium目前github上有6k的star styled-components目前github上有17k多的stat
使用方式下面介绍 aphrodite 的使用方式。
1. 下载aphrodite
npm install --save aphrodite
2. 在组件中使用
import { StyleSheet, css } from aphrodite;
// 创建一个函数组件
const App props (divdiv className{css(styles.red)}这里的背景色是红色的/divdiv className{css(styles.hover)}鼠标移上变成红色背景/divdiv className{css(styles.small)}当浏览器的宽度小于等于600px的时候这里是红色的/divdiv className{css(styles.red, styles.blue)}这里的背景色是蓝色的/divdiv className{css(styles.blue, styles.small)}当浏览器的宽度小于等于600px的时候这里是红色的否则就是蓝色的/div/div
)
// 定义css样式
const styles StyleSheet.create({
red: {
backgroundColor: red
},
blue: {
backgroundColor: blue
},
hover: {
:hover: {
backgroundColor: red
}
},
small: {
media (max-width: 600px): {
backgroundColor: red,
}
}
});
// 导出这个组件
export default App;
radium使用
import Radium from radium;
// 创建一个函数组件
const App props (divdiv style{ styles.red }这里的背景色是红色的/div/div
)
// 定义css样式
const styles {red: {color: #c00}
}
export default Radium(App)
css module的使用 将 css 的文件名改为 App.module.css , 这样做会为你这个 css 文件下所有的 id 名或者 class 名添加一个随机的后缀名。这样就可以防止和其它的文件冲突了 使用
// App.js
import { Component } from react;
import style from ./App.module.css
class App extends Component {render() {return (div idroot className{ style[app-root] }App/div)}
}
export default App;
全局处理
:global(#root) {background: #eee;
}
