![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 78
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
详解 diff 算法中的 list-diff【字符串的最小编辑距离问题】
内容list-diff 源码代码是大佬 livoras 所写,本文对此代码进行详细解释列表对比算法问题如果列表中元素的顺序为 1 2 3 4,现在要把列表中元素的顺序移动为 2 1 3 4,应该怎样做呢?相信你肯定想到了,应该把 1 和 2 交换位置;咱们现在把交换位置这个操作,可以看成删除第0个位置的元素,和在第1个位置添加元素1的结合。所以列表中元素的操作就只有增加和删除。贪心算法问题:如果列表中元素的顺序为 1 2 3 4,现在要把列表中元素的顺序移动为 4 2 3 1,原创 2022-03-25 15:03:00 · 505 阅读 · 0 评论 -
React琐碎知识点
引入包的时候,react.development必须得在react-dom.development的上面创建虚拟DOM得是大写字母,且以V开头创建虚拟DOMconst VDOM = React.createElement(标签名, 标签体属性, 标签体内容);//例:const VDOM = React.createElement('h1', {id:'title'}, 'Hello React');// 使用jsxconst VDOM = <h1 id = 'title'>H.原创 2021-01-19 10:54:52 · 83 阅读 · 0 评论 -
组合 & 继承
包含关系有些组件无法提前知晓它们子组件的具体内容<FancyBorder> JSX 标签中的所有内容都会作为一个 children prop 传递给 FancyBorder 组件。因为 FancyBorder 将 {props.children} 渲染在一个 <div> 中,被传递的这些子组件最终都会出现在输出结果中。function FancyBorder(props) { return ( <div className={'FancyBorder Fanc原创 2021-01-18 23:48:30 · 57 阅读 · 0 评论 -
状态提升
状态提升通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去计算水在特定温度下是否会沸腾的温度计算器由两个输入框,希望一个变化的时候,另一个也同步更新const scaleNames = { c: 'Celsius', //摄氏度 f: 'Fahrenheit' //华氏度};class TemperatureInput extends React.Component { constructor(props) { su原创 2021-01-18 23:16:20 · 137 阅读 · 0 评论 -
表单
受控组件在HTML中,表单元素(如<input>、<textarea> 和 <select>)通常自己维护state,并根据用户输入进行更新在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。原创 2021-01-18 11:40:10 · 86 阅读 · 0 评论 -
列表 & Key
列表 & KeyJS中的map()const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);//[2, 4, 6, 8, 10]渲染多个组件使用{}在JSX内构建一个元素集合const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =&原创 2021-01-18 10:20:05 · 179 阅读 · 0 评论 -
条件渲染
条件渲染iffunction Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={fa原创 2021-01-18 09:18:35 · 126 阅读 · 0 评论 -
事件处理
事件处理React 事件的命名采用小驼峰式,而不是纯小写使用JSX语法时需要传入一个函数作为事件处理函数,而不是一个字符串//传统的HTML传入的是字符串<button onclick="activateLasers()"> Activate Lasers</button>//在React中传入的是函数<button onClick={activateLasers}> Activate Lasers</button>在React原创 2021-01-18 08:21:33 · 111 阅读 · 0 评论 -
State & 生命周期
State & 生命周期state是私有的,并且完全受控于当前组件componentDidMount:挂载,当类组件第一次被渲染到DOM的时候使用componentWillUnmount:卸载,当类组件被删除的时候使用class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMo原创 2021-01-17 23:05:38 · 242 阅读 · 0 评论 -
组件 & Props
组件 & Props组件:类似于Javascript函数。它接受任意的入参(即"Props"),并返回用于描述页面展示内容的React元素函数组件与class组件1. 函数组件:接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。function Welcome(props) { return <h1>Hello, {props.name}</h1>;}2. class组件:继承React.Component,原创 2021-01-17 21:15:23 · 88 阅读 · 0 评论 -
元素渲染
元素渲染元素是构成React应用的最小砖块const element = <h1>Hello, world</h1>;与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。将一个元素渲染为DOM该结点内的所有内容都将由React DOM管理仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用,那么你可以在应用中包含任意多的原创 2021-01-17 18:04:54 · 142 阅读 · 0 评论 -
JSX简介
JSX简介下面这个标签语法是JSXconst element = <h1>Hello, world!</h1>;JSX可以生成React元素在JSX中嵌入表达式介绍ReactDOM的render使用react开发网页,使用两个包:react(react的核心代码)react-dom(涉及DOM操作的部分)react的核心思想是虚拟DOM,而react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。render用于将React渲染的虚拟原创 2021-01-17 17:33:20 · 327 阅读 · 2 评论