React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解State和Props，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。
这是Choerodon的一个前端页面
在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。
为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。
React在编写组件时使用混合HTML和JavaScript的一种语法（称为JSX）。 但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯JavaScript，因此必须将JSX转换为HTML。 这是一个div的JSX代码，它有一个类和一些内容：
文本
在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用：
React.createElement(
'div',
{ className: 'cn' },
'文本'
);React.createElement(
'div',
{ className: 'cn' },
['Content 1!', React.createElement('br'), 'Content 2!']
)
它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素，这里的文本也会被当作一个子元素，所以第三个参数是 `“文本”` 。
到这里你应该就能想象这个元素下有更多`children`的时候会发生什么。
React.createElement(
目前的函数有五个参数：元素的类型，全部属性的对象和三个子元素。 由于一个`child`也是React已知的`HTML`标签，因此它也将被解释成函数调用。
到目前为止，本文已经介绍了两种类型的`child`参数，一种是`string`纯文本，一种是调用其他的`React.createElement`函数。其实，其他值也可以作为参数，比如：
- 基本类型 false，null，undefined和 true
- 数组
- React组件
使用数组是因为可以将子组件分组并作为一个参数传递：当然，React的强大功能不是来自HTML规范中描述的标签，而是来自用户创建的组件，例如：
function Table({ rows }) {
return (
{rows.map(row => (
{row.title}
))}
);
}组件允许开发者将模板分解为可重用的块。在上面的“纯函数”组件的示例中，组件接受一个包含表行数据的对象数组，并返回React.createElement对table元素及其行作为子元素的单个调用 。
每当开发者将组件放入JSX布局中时它看上去是这样的：
但从浏览器角度，它看到的是这样的：
React.createElement(Table, { rows: rows });请注意，这次的第一个参数不是以string描述的HTML元素，而是组件的引用（即函数名）。第二个参数是传入该组件的props对象。
将组件放在页面上
现在，浏览器已经将所有JSX组件转换为纯JavaScript，现在浏览器获得了一堆函数调用，其参数是其他函数调用，还有其他函数调用......如何将它们转换为构成网页的DOM元素？
为此，开发者需要使用ReactDOM库及其render方法：
function Table({ rows }) { /* ... */ } // 组件定义
// 渲染一个组件
ReactDOM.render(
React.createElement(Table, { rows: rows }), // "创建" 一个 component
document.getElementById('#root') // 将它放入DOM中
);当ReactDOM.render被调用时，React.createElement最终也会被调用，它返回以下对象：
// 这个对象里还有很多其他的字段，但现在对开发者来说重要的是这些。
{
type: Table,
props: {
rows: rows
},
// ...
}这些对象构成了React意义上的Virtual DOM
它们将在所有进一步渲染中相互比较，并最终转换为真正的DOM（与Virtual DOM对比）。
这是另一个例子：这次有一个div具有class属性和几个子节点：
React.createElement(
'div',
{ className: 'cn' },
'Content 1!',
'Content 2!',
);变成：
{
type: 'div',
props: {
className: 'cn',
children: [
'Content 1!',
'Content 2!'
]
}
}所有的传入的展开函数，也就是React.createElement除了第一第二个参数剩下的参数都会在props对象中的children属性中，不管传入的是什么函数，他们最终都会作为children传入props中。
而且，开发者可以直接在JSX代码中添加children属性，将子项直接放在children中，结果仍然是相同的：
在Virtual DOM对象被建立出来之后ReactDOM.render会尝试按以下规则把它翻译成浏览器能够看得懂的DOM节点：
如果Virtual DOM对象中的type属性是一个string类型的tag名称，就创建一个tag，包含props里的全部属性。
如果Virtual DOM对象中的type属性是一个函数或者class，就调用它，它返回的可能还是一个Virtual DOM然后将结果继续递归调用此过程。
如果props中有children属性，就对children中的每个元素进行以上过程，并将返回的结果放到父DOM节点中。
最后，浏览器获得了以下HTML（对于上述table的例子）：
重建DOM
接下浏览器要“重建”一个DOM节点，如果浏览器要更新一个页面，显然，开发者并不希望替换页面中的全部元素，这就是React真正的魔法了。如何才能实现它？先从最简单的方法开始，重新调用这个节点的ReactDOM.render方法。
// 第二次调用
ReactDOM.render(
React.createElement(Table, { rows: rows }),
document.getElementById('#root')
);这一次，上面的代码执行逻辑将与看到的代码不同。React不是从头开始创建所有DOM节点并将它们放在页面上，React将使用“diff”算法，以确定节点树的哪些部分必须更新，哪些部分可以保持不变。
那么它是怎样工作的？只有少数几个简单的情况，理解它们将对React程序的优化有很大帮助。请记住，接下来看到的对象是用作表示React Virtual DOM中节点的对象。
▌Case 1：type是一个字符串，type在调用之间保持不变，props也没有改变。
// before update
{ type: 'div', props: { className: 'cn' } }
// after update
{ type: 'div', props: { className: 'cn' } }这是最简单的情况：DOM保持不变。
▌Case 2：type仍然是相同的字符串，props是不同的。
// before update:
{ type: 'div', props: { className: 'cn' } }
// after update:
{ type: 'div', props: { className: 'cnn' } }由于type仍然代表一个HTML元素，React知道如何通过标准的DOM API调用更改其属性，而无需从DOM树中删除节点。
▌Case 3：type已更改为不同的组件String或从String组件更改为组件。
// before update:
{ type: 'div', props: { className: 'cn' } }
// after update:
{ type: 'span', props: { className: 'cn' } }由于React现在看到类型不同，它甚至不会尝试更新DOM节点：旧元素将与其所有子节点一起被删除（unmount）。因此，在DOM树上替换完全不同的元素的代价会非常之高。幸运的是，这在实际情况中很少发生。
重要的是要记住React使用===（三等）来比较type值，因此它们必须是同一个类或相同函数的相同实例。
下一个场景更有趣，因为这是开发者最常使用React的方式。
▌Case 4：type是一个组件。
// before update:
{ type: Table, props: { rows: rows } }
// after update:
{ type: Table, props: { rows: rows } }你可能会说，“这好像没有任何变化”，但这是不对的。
如果type是对函数或类的引用（即常规React组件），并且启动了树diff比较过程，那么React将始终尝试查看组件内部的所有child以确保render的返回值没有更改。即在树下比较每个组件 - 是的，复杂的渲染也可能变得昂贵！
组件中的children
除了上面描述的四种常见场景之外，当元素有多个子元素时，开发者还需要考虑React的行为。假设有这样一个元素：
// ...
props: {
children: [
{ type: 'div' },
{ type: 'span' },
{ type: 'br' }
]
},
// ...开发者开发者想将它重新渲染成这样(span和div交换了位置)：
// ...
props: {
children: [
{ type: 'span' },
{ type: 'div' },
{ type: 'br' }
]
},
// ...那么会发生什么？
当React看到里面的任何数组类型的props.children，它会开始将它中的元素与之前看到的数组中的元素按顺序进行比较：index 0将与index 0，index 1与index 1进行比较，对于每对子元素，React将应用上述规则集进行比较更新。在以上的例子中，它看到div变成一个span这是一个情景3中的情况。但这有一个问题：假设开发者想要从1000行表中删除第一行。React必须“更新”剩余的999个孩子，因为如果与先前的逐个索引表示相比，他们的内容现在将不相等。
幸运的是，React有一种内置的方法来解决这个问题。如果元素具有key属性，则元素将通过key而不是索引进行比较。只要key是唯一的，React就会移动元素而不将它们从DOM树中移除，然后将它们放回（React中称为挂载/卸载的过程）。
// ...
props: {
children: [ // 现在react就是根据key，而不是索引来比较了
{ type: 'div', key: 'div' },
{ type: 'span', key: 'span' },
{ type: 'br', key: 'bt' }
]
},
// ...当状态改变时
到目前为止，本文只触及了props，React哲学的一部分，但忽略了state。这是一个简单的“有状态”组件：
class App extends Component {
state = { counter: 0 }
increment = () => this.setState({
counter: this.state.counter + 1,
})
render = () => (
{'Counter: ' + this.state.counter}
)
}现在，上述例子中的state对象有一个counter属性。单击按钮会增加其值并更改按钮文本。但是当用户点击时，DOM会发生什么？它的哪一部分将被重新计算和更新？
调用this.setState也会导致重新渲染，但不会导致整个页面重渲染，而只会导致组件本身及其子项。父母和兄弟姐妹都可以幸免于难。
修复问题
本文准备了一个DEMO ，这是修复问题前的样子。你可以在这里 查看其源代码。不过在此之前，你还需要安装React Developer Tools 。
打开demo要看的第一件事是哪些元素以及何时导致Virtual DOM更新。导航到浏览器的Dev Tools中的React面板，点击设置然后选择“Highlight Updates”复选框：
现在尝试在表中添加一行。如你所见，页面上的每个元素周围都会出现边框。这意味着每次添加行时，React都会计算并比较整个Virtual DOM树。现在尝试按一行内的计数器按钮。你将看到Virtual DOM如何更新 （state仅相关元素及其子元素更新）。
React DevTools暗示了问题可能出现的地方，但没有告诉开发者任何细节：特别是有问题的更新是指元素“diff”之后有不同，还是组件被unmount/mount了。要了解更多信息，开发者需要使用React的内置分析器（请注意，它不能在生产模式下工作）。
转到Chrome DevTools中的“Performance”标签。点击record按钮，然后点击表格。添加一些行，更改一些计数器，然后点击“Stop”按钮。稍等一会儿之后开发者会看到：
在结果输出中，开发者需要关注“Timing”。缩放时间轴，直到看到“React Tree Reconciliation”组及其子项。这些都是组件的名称，旁边有[update]或[mount]。可以看到有一个TableRow被mount了，其他所有的TableRow都在update，这并不是开发者想要的。
大多数性能问题都由[update]或[mount]引起
一个组件（以及组件下的所有东西）由于某种原因在每次更新时重新挂载，开发者不想让它发生（重新挂载很慢），或者在大型分支上执行代价过大的重绘，即使组件似乎没有发生任何改变。
修复mount/unmount
现在，当开发者了解React如何决定更新Virtual DOM并知道幕后发生的事情时，终于准备好解决问题了！修复性能问题首先要解决 mount/unmount。
如果开发者将任何元素/组件的多个子元素在内部表示为数组，那么程序可以获得非常明显的速度提升。
考虑一下：
在虚拟DOM中，将表示为：
// ...
props: {
children: [
{ type: Message },
{ type: Table },
{ type: Footer }
]
}
// ...一个简单的Message组件（是一个div带有一些文本，像是猪齿鱼的顶部通知）和一个很长的Table，比方说1000多行。它们都是div元素的child，因此它们被放置在父节点的props.children之下，并且它们没有key。React甚至不会通过控制台警告来提醒开发者分配key，因为子节点React.createElement作为参数列表而不是数组传递给父节点。
现在，用户已经关闭了顶部通知，所以Message从树中删除。Table、Footer是剩下的child。
// ...
props: {
children: [
{ type: Table },
{ type: Footer }
]
}
// ...React如何看待它？它将它视为一系列改变了type的child：children[0]的type本来是Message，但现在他是Table。因为它们都是对函数（和不同函数）的引用，它会卸载整个Table并再次安装它，渲染它的所有子代：1000多行！
因此，你可以添加唯一键（但在这种特殊情况下使用key不是最佳选择）或者采用更智能的trick：使用 && 的布尔短路运算，这是JavaScript和许多其他现代语言的一个特性。像这样：
即使Message被关闭了(不再显示)，props.children父母div仍将拥有三个元素，children[0]具有一个值false（布尔类型）。还记得true/false, null甚至undefined都是Virtual DOM对象type属性的允许值吗？浏览器最终得到类似这样的东西：
// ...
props: {
children: [
false, // isShowMessage && 所以，不管Message是否被显示，索引都不会改变，Table仍然会和Table比较，但仅仅比较Virtual DOM通常比删除DOM节点并从中创建它们要快得多。
现在来看看更高级的东西。开发者喜欢HOC。高阶组件是一个函数，它将一个组件作为一个参数，添加一些行为，并返回一个不同的组件（函数）：
function withName(SomeComponent) {
return function(props) {
return 开发者在父render方法中创建了一个HOC 。当React需要重新渲染树时，React 的Virtual DOM将如下所示：
// On first render:
{
type: ComponentWithName,
props: {},
}
// On second render:
{
type: ComponentWithName, // Same name, but different instance
props: {},
}现在，React只会在ComponentWithName上运行一个diff算法，但是这次同名引用了一个不同的实例，三等于比较失败，必须进行完全重新挂载。注意它也会导致状态丢失，幸运的是，它很容易修复：只要返回的实例都是同一个就好了：
// 单例
const ComponentWithName = withName(Component);
class App extends React.Component() {
render() {
return 修复update
现在浏览器已经确保不会重新装载东西了，除非必要。但是，对位于DOM树根目录附近的组件所做的任何更改都将导致其所有子项的进行对比重绘。结构复杂，价格昂贵且经常可以避免。
如果有办法告诉React不要查看某个分支，那将是很好的，因为它没有任何变化。
这种方式存在，它涉及一个叫shouldComponentUpdate的组件生命周期函数。React会在每次调用组件之前调用此方法，并接收props和state的新值。然后开发者可以自由地比较新值和旧值之间的区别，并决定是否应该更新组件（返回true或false）。如果函数返回false，React将不会重新渲染有问题的组件，也不会查看其子组件。
通常比较两组props和state一个简单的浅层比较就足够了：如果顶层属性的值相同，浏览器就不必更新了。浅比较不是JavaScript的一个特性，但开发者很多方法来自己实现它，为了不重复造轮子，也可以使用别人写好的方法 。
在引入浅层比较的npm包后，开发者可以编写如下代码：
class TableRow extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
const { props, state } = this;
return !shallowequal(props, nextProps)
&& !shallowequal(state, nextState);
}
render() { /* ... */ }
}但是你甚至不必自己编写代码，因为React在一个名为React.PureComponent 的类中内置了这个功能，它类似于React.Component，只是shouldComponentUpdate已经为你实现了浅层props/state比较。
或许你会有这样的想法，能替换Component为PureComponent就去替换。但开发者如果错误地使用PureComponent同样会有重新渲染的问题存在，需要考虑下面三种情况：
{ /* ... */ }}
/>
上面的代码片段演示了三种最常见的反模式，请尽量避免它们！
正确地使用PureComponent，你可以在这里 看到所有的TableRow都被“纯化”后渲染的效果。
但是，如果你迫不及待想要全部使用纯函数组件，这样是不对的。比较两组props和state不是免费的，对于大多数基本组件来说甚至都不值得：运行shallowCompare比diff算法需要更多时间。
可以使用此经验法则：纯组件适用于复杂的表单和表格，但它们通常会使按钮或图标等简单元素变慢。
现在，你已经熟悉了React的渲染模式，接下来就开始前端优化之旅吧。
本篇文章出自
Choerodon猪齿鱼社区 陈彬杰。
你可能感兴趣的:(react.js,virtual-dom,choerodon)
react.js
涔溪
react.js 前端 前端框架
一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst
React.js如何使用Bootstrap
Vesper63
前端 react.js bootstrap 前端
在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y
react起源
lemmo
简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
2024前端面试准备之uniapp篇
前端fighter
前端 面试 uni-app
全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的
快速创建react项目.
River_tong
react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭
Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）
vim前端
本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架，Vue.js的目标是通过尽可能简单的API实
Vue 与 React 比较，十年恩怨情仇整理
过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
什么是VUE？
最爱喝龙井
什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整
常见的web前端开发框架：Bootstrap
钟念
前端开发 前端开发框架 前端 bootstrap vue.js html javascript 前端框架 css
常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo
常见的web前端开发框架：Vue.js
钟念
前端开发 前端开发框架 前端 vue.js javascript vue 前端框架 html
常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Vue.js基本概念：Vue.js是一
常见的web前端开发框架：React.js
钟念
前端开发 前端开发框架 前端 react.js 前端框架 javascript
常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。React.jsReact.js是
常见的web前端开发框架：Angular.js
钟念
前端开发 前端开发框架 前端 前端框架 angular.js javascript typescript npm html5
常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Angular.js基本概念：
Vue 与 React 比较，十年恩怨情仇整理
过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践
全栈开发圈
react.js node.js mongodb
详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环
React 与 Angular：项目的最佳框架
千源万码
react.js angular.js 前端
什么是React？React或React.js是一个基于JavaScript的前端库，可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React，程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名，但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在
web 技术栈有哪些？
老马啸西风
web 前端
前端技术栈：HTML（超文本标记语言）：用于创建网页结构的标记语言，定义页面的内容和结构。CSS（层叠样式表）：用于设计和排版网页的样式表语言，负责页面的外观和样式。JavaScript：一种脚本语言，用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等，可以加速开发。前端框架和库：React.js、Vue.js、Angular等，用于简化和加速前端开发
DataBinding使用详解-Google官方的视图绑定
ZhangQiang-
[Android进阶]
几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说，就是通过某种机制，把代码中的数据和xml(UI)绑定起来，双方都能对数据进行操作，并且在数据发生变化的时候，自动刷新数据。在2015年的谷歌IO大会上
LLM应用开发与落地：使用gradio十分钟搭建聊天UI
前行的七哥
ui 人工智能
一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或
通过 React 来构建界面
张培跃吧
React react.js javascript ecmascript
1-通过React来构建界面第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的react和react-dom，可以把18替换成所需加载的版本号。react.js：React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro
如何在 React 中使用 Sass
网络研究院
网络研究院 react.js sass 前端 编程 项目
Sass（语法很棒的样式表）是CSS的扩展，具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性，这意味着您可以在Web开发项目中使用React等JavaScript框架。然而，与普通CSS不同，您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样，React本身并
js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡
weixin_39610774
js获取今天剩余时间 用 js判断 一个数是否是素数(质数)
React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡
蓝桥云课
web reactjs
React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI
【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！
实验楼v
React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
React-9：通过路由实现排序切换
kino2046
queryString（查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类，我们通过它可以很
构建高效外卖系统：技术实践与代码示例
万岳科技系统开发
数据库 小程序
外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例：前端：React.js后端：Node.js数据库：MongoDB实时通信：WebSocket云服务：AWS或Azure2.用户认证与授
React.js快速入门教程
heiyay
react.js 前端 前端框架
介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J
useRef钩子大法好！
今天也想MK代码
javascript react.js 前端
在React.js中，useRef是一个钩子，允许你创建一个对元素或值的可变引用。与useState钩子不同，更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素，存储持久值，或处理不应触发重新渲染的值。useRef的基本语法如下：constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用
Vue.js 学习Day1
cf6d95617c55
Vue.js-Day1课程介绍前5天：都在学习Vue基本的语法和概念；打包工具Webpack,Gulp后5天：以项目驱动教学；什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js
【React.js 06】Redux基础知识
IUVO
Redux是一个专注于状态管理的库，和React是解耦的，用Angular和Vue都可以使用Redux。其具有一个单一状态，单向数据流的特性。Redux概念redux有一个store，记录所有的state，state要改变的时候，就通知dispatch去执行action，reducer拿到state和action去生成新的state，store.subscribe根据新的state重新渲染出改变后
前端八股文系列（七） React 面试专题
微莱羽墨
前端 前端 react.js 面试
文章目录React面试专题React.js是MVVM框架吗?hooks用过吗？聊聊react中class组件和函数组件的区别React组件通信方式1）父组件向子组件通信2）子组件向父组件通信3）跨级组件通信4）非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1）背景2）实现原理Portals何时要使用异步组件？如和使用异步组件React事件绑定原
apache ftpserver-CentOS config
gengzg
apache
<server xmlns="http://mina.apache.org/ftpserver/spring/v1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://mina.apache.o
优化MySQL数据库性能的八种方法
AILIKES
sql mysql
1、选取最适用的字段属性 MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
JeeSite 企业信息化快速开发平台
Kai_Ge
JeeSite
JeeSite 企业信息化快速开发平台
平台简介
JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。
JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
通过Spring Mail Api发送邮件
120153216
邮件 main
原文地址：http://www.open-open.com/lib/view/open1346857871615.html
使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】
Spring Mail API都在org.spri
Pysvn 程序员使用指南
2002wmj
SVN
源文件:http://ju.outofmemory.cn/entry/35762
这是一篇关于pysvn模块的指南.
完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html.
pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个.
该
在SQLSERVER中查找被阻塞和正在被阻塞的SQL
357029540
SQL Server
SELECT R.session_id AS BlockedSessionID ,
S.session_id AS BlockingSessionID ,
Q1.text AS Block
Intent 常用的用法备忘
7454103
.net android Google Blog F#
Intent
应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。
下面列出几种Intent 的用法
显示网页:
Spring定时器时间配置
adminjun
spring 时间配置 定时器
红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />
测试的时候，由于是每天定时执行，所以后面三个数
POJ 2421 Constructing Roads 最小生成树
aijuans
最小生成树
来源：http://poj.org/problem?id=2421
题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。
思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。
代码：
#include <iostream>
#include <cstdio>
重构笔记——提取方法（Extract Method）
ayaoxinchao
java 重构 提炼函数 局部变量 提取方法
提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。
下面是我学习这个重构手法的笔记：
提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
为UILabel添加点击事件
bewithme
UILabel
默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。
UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
NoSQL数据库之Redis数据库管理(PHP-REDIS实例)
bijian1013
redis 数据库 NoSQL
一.redis.php
<?php
//实例化
$redis = new Redis();
//连接服务器
$redis->connect("localhost");
//授权
$redis->auth("lamplijie");
//相关操
SecureCRT使用备注
bingyingao
secureCRT 每页 行数
SecureCRT日志和卷屏行数设置
一、使用securecrt时，设置自动日志记录功能。
1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs；
2、点击Options -> Global Options -> Default Session -> Edite Default Sett
【Scala九】Scala核心三：泛型
bit1129
scala
泛型类
package spark.examples.scala.generics
class GenericClass[K, V](val k: K, val v: V) {
def print() {
println(k + "," + v)
}
}
object GenericClass {
def main(args: Arr
素数与音乐
bookjovi
素数 数学 haskell
由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。
闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
Java-Collections Framework学习与总结-IdentityHashMap
BrokenDreams
Collections
这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。
简单的说，IdentityHashMap和HashM
读《研磨设计模式》-代码笔记-享元模式-Flyweight
bylijinnan
java 设计模式
声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java
PS人像润饰&调色教程集锦
cherishLC
PS
1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓
http://www.howzhi.com/course/retouching/
新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。
所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
更新多个字段的UPDATE语句
crabdave
update
更新多个字段的UPDATE语句
update tableA a
set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
hive实例讲解实现in和not in子句
daizj
hive not in in
本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html
当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。
假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
一道24点的10+种非人类解法（2,3,10,10）
dsjt
算法
这是人类算24点的方法？！！！
事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态
朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。
然后么。。。我就在深夜很得瑟的问室友求室友算
刚出完题，文哥的暴走之旅开始了
5秒后
关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题
dcj3sjt126com
yii framework
在使用 YIi的路径管理工具时，发现了一个问题。 <?php
对象与关系之间的矛盾：“阻抗失配”效应[转]
come_for_dream
对象
概述
“阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。
“阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
学习编程那点事
gcq511120594
编程 互联网
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！
接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
Reverse Linked List II
hcx2013
list
Reverse a linked list from position m to n. Do it in-place and in one-pass.
For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4,
return
Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介
jinnianshilongnian
spring 4.1
目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T
Hadoop集群工具distcp
liyonghui160com
1. 环境描述
两个集群：rock 和 stone
rock无kerberos权限认证，stone有要求认证。
1. 从rock复制到stone，采用hdfs
Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
一个备份MySQL数据库的简单Shell脚本
pda158
mysql 脚本
主脚本（用于备份mysql数据库）： 该Shell脚本可以自动备份
数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。
1. 分别建立目录“backup”和“oldbackup” #mkdir /backup #mkdir /oldbackup
300个涵盖IT各方面的免费资源（中）——设计与编码篇
shoothao
IT资源 图标库 图片库 色彩板 字体
A. 免费的设计资源
Freebbble:来自于Dribbble的免费的高质量作品。
Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。
Graphic Burger:每个像素点都做得很细的绝佳的设计资源。
Pixel Buddha:免费和优质资源的专业社区。
Premium Pixels:为那些有创意的人提供免费的素材。
thrift总结 - 跨语言服务开发
uule
thrift
官网
官网JAVA例子
thrift入门介绍
IBM-Apache Thrift - 可伸缩的跨语言服务开发框架
Thrift入门及Java实例演示
thrift的使用介绍
RPC
POM：
<dependency>
<groupId>org.apache.thrift</groupId>
