React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。
转载
2024-05-15 13:54:01
59阅读
React中的纯组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent，通常只需要继承React.PureComponent就可以定义一个纯组件。React.PureComponent与React.Component很相似，两者的区别在于Reac
原创
2022-05-28 00:41:02
214阅读
React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。 描述 高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于Java
原创
2022-05-28 00:41:32
186阅读
受控组件的由来HTML中的表单元素是可以输入的，也就是有自己的状态（当你在input框中进行输入的时候是可以看到值变化的，也就是有自己的状态）。而React中可变状态通常保存在state中，并且只能通过setState()方法修改。react将state与表单元素值value绑定到一起，由state的值来控制表单元
原创
2022-11-18 00:13:36
71阅读
在React中，组件卸载（Unmounting）阶段的生命周期方法。React中组件卸载阶段的正确方法是：1. 类组件中的componentWillUnmount在类组件中，componentWillUnmount方法会在组件卸载前被调用，通常用于清理操作（如移除事件监听器、清除定时器等）。使用方法class ExampleComponent extends React.Component {
组件就是页面上的一部分。如图，左边是一个网页。右边是对应的一个组件图。我们可以把一个大的网页拆分成很多小的部分。比如标题部分，对应一个组件，就是标题组件。搜索部分，对应的组件就是搜索组件。而这个搜索组件我们可以进一步的拆分，是由input框和button组成的。所以还可以继续把搜索组件拆分成小的组件
转载
2019-03-09 15:35:00
93阅读
2评论
玩懂React的组件。
原创
2022-10-21 16:06:55
261阅读
简单组件 和 复杂组件 的概念如果组件有state（状态）属性，就是复杂组件。如果没有state（状态）属性，就是简单组件。state、props、refs是组件实例的三大核心属性，在之后会逐一进行详细地讲述，不了解者可以先跳过，之后再来回看下述内容。函数式组件function App() {
return <h1>我是一个函数式组件</h1>
}以上App函数式组
转载
2024-03-03 22:30:44
38阅读
第一步在父组件中写下面代码 onRef = (ref) => { this.child = ref };第二步将此方法传个子组件 <SelectModal onRef={this.onRe
原创
2023-12-12 10:17:06
188阅读
1.概念：React里允许我们将UI视图(界面)拆分成可复用的代码片段，并对每个片段单独构思，我们将每个独立的UI片段称为"组件"2.优点：由于组件逻辑使用JavaScript编写而非模板，因此开发者可以轻松的在应用项目中传递数据，并保持状态与DOM分离。同时达到封装的目的，支持复用3.分类：React里，组件根据其功能可以分为两大类：a.函数式组件：本质上就是一个函数，将组件对应的UI视图以JS
React组件名首字母必须为大写一、组件类型（一）函数组件函数组件（无状态组件，UI组件）： 是一个纯函数，只用组件展示，组件只负责根据外部传入的 props 来展示，书写更简洁，执行效率更高（推荐） 默认没有this>例子：
function Home(){
return(
< div></ div>
)
在网页设计中，动态效果常常能吸引用户的注意力，使页面更具活力。今天，我要向大家推荐一款基于React的开源项目——react-text-loop。它为你的标题带来了一种创新的动画效果，让文字以循环的方式优雅地呈现。项目介绍react-text-loop是一款利用react-motion实现的文本循环动画组件，可以将多个文本节点以流畅的过渡动画形式进行循环显示。它的特色在于，即使在高速动画下也能保
在项目中我们经常会用到树形结构，在之前我们没有用到react时都是直接用jquery来操作dom等，现在使用react应当使用数据流来控制ui了，所以碰到树形结构理所当然就会想到用一些支持react的ui框架来写，比如antd中的Tree组件来实现。但是antd中的树组件有时候并不能满足我们的一些特殊要求，如果自己造轮子来写一个树组件，emmmmmmmmm这样也是可以的，但是自己现在太菜了还是借鉴
在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的通过上节课的学习，已经把"小姐姐"组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。这里涉及的是父组件向
将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态思想：状态提升公
原创
2022-11-18 00:01:54
73阅读
父组件向子组件通信在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信。传递的数据可以分成两类子组件是作为属性来接收这些数据的第一类就是数据：变量，对象，属性数据，状态数据等等这些数据发生改变，子组件接收的属性数据就发生了改变。第二类就是方法：父组件可以向子组件传递属性方法，子组件接收方法，并可以在组件内执行，有两种执行方式注意：父组件传给子组件的方法是不能执行的，执行了相当于将方法的返回
原创
精选
2022-08-24 10:08:49
567阅读
点赞
这几个库，你知道吗？
转载
2021-07-15 17:53:06
380阅读
constructor函数中bind class ReactEvent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleCli
转载
2020-12-14 12:58:00
171阅读
2评论
https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过pr
转载
2019-07-03 11:34:00
117阅读
在React开发中，组件组合（Component Composition）是构建可复用、可维护组件的核心概念之一。它允许我们将多个组件组合在一起，形成更复杂的功能，同时保持每个组件的独立性和可测试性。理解并正确运用组件组合模式，是成为React高手的关键一步。
什么是组件组合
组件组合是一种设计模式，它通过将多个小组件组合成一个更大的组件来实现复杂功能。与继承不同，组合通过"包含&quo
