![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
大魔王sama
这个作者很懒,什么都没留下…
展开
-
React 学习06 - React 组件生命周期
React 的每个组件都有自己的生命周期,从声明、挂载到卸载销毁,React 给我们提供了在不同生命周期节点进行操作的生命周期钩子,他们将在组件达到某个特定时刻的时候被触发。 生命周期图谱 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor render componentDidMount 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下: render componentDidUpdate 卸载 当组件从原创 2020-08-07 14:57:23 · 102 阅读 · 0 评论 -
React 学习05 - React 组件传值
组件化开发必然会需要组件间传值,我们通过一个案例来学习组件传值,需求如下: 分析和实现 首先,我们可以将需求部分分为三个组件:父组件、新增组件(输入框部分)、和列表组件 // App - 父组件 class App extends React.Component { render() { return ( <div> <h2>数组遍历</h2> <Add /> <List /> </div>原创 2020-08-06 11:21:28 · 216 阅读 · 0 评论 -
React 学习04 - React 组件开发
组件的声明和渲染 组件的声明有两种方式: 工厂函数组件(简单组件) function MyComponent() { return <h2>工厂函数组件(简单组件)</h2> } ES6 类组件(复杂组件) class MyComponent2 extends React.Component { // 构造函数待会用 // constructor() {} render() { return <h2>ES6 类组件(复杂组件)&l原创 2020-08-04 16:59:12 · 111 阅读 · 0 评论 -
React 学习03 - JSX 列表渲染
实例 我们可以用一个例子来学习 JSX 的列表渲染,不说废话,直接上效果图: 如图所示,这是一个 ul 列表,ul 列表的基本结构是: <ul> <li></li> <li></li> </ul> 所以说,我们需要将 ['Android', 'IOS', 'webApp', '微信小程序'] 中的每一项都写入一个 li 标签中并添加到 ul 中,分析完了,开始码代码,这里我们遇到了第一个问题,如何在 JSX 中遍历数组?,我原创 2020-07-21 14:32:39 · 201 阅读 · 0 评论 -
React 学习02 - JSX 的基本使用
使用 React 时,在引入了相关 JS 文件之后,通常要做两个步骤: 创建虚拟 DOM 引入虚拟 DOM(将虚拟 DOM 渲染到目标节点中) 其中,JSX 语法是为了让我们更方便的执行第一步,那么在使用 JSX 之前,我们先来看一下原始方式是如何创建虚拟 DOM 的。 原始方式创建虚拟 DOM 利用原始方式,需要用到 React.createElement() 方法,要指定一些参数: 第一个参数:标签名 第二个参数:标签属性对象 第三个参数:标签中的内容 例如: let vDom = React.原创 2020-07-21 13:50:28 · 249 阅读 · 0 评论 -
React 学习01 - React 的基本使用
React 的基本概念 React 是 Facebook 开发出的一款 JS 库 React 特点 React 不使用模板,使用组件 React 不是 MVC 框架 响应式,当数据发生变化,利用 render 方法重新渲染 React 是一个轻量级的 JS 库 React 原理 虚拟 DOM ...原创 2020-07-21 11:56:57 · 87 阅读 · 0 评论