React.js 初级入门学习, 你学废了吗?

React.js 初级入门学习, 你学废了吗?

React 简介

React 起源于Facebook的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram（照片交友）的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。

React学习路线

React 学习路线图

react-developer-roadmap

React与Vue的对比

组件化方面

1. 什么模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发
2. 什么是组件化：是从UI界面的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件；便于项目的维护和开发；
3. 组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面；
4. Vue是如何实现组件化的：通过.vue文件，来创建对应的组件

• template 结构
• script 行为
• style 样式

5. React如何实现组件化：
   React中有组件化的概念，但是并没有像vue这样的组件模板文件；React中，一切都是以JS来表现的

开发团队方面

• React是由Facebook前端官方团队进行维护和更新的；因此，React的维护开发团队，技术实力比较雄厚；
• Vue：第一版，主要是有作者尤雨溪专门进行维护的，当Vue更新到2.x版本后，也有了一个以尤雨溪为主导的开源小团队，进行相关的开发和维护；

更多对比

参考：vue还是react？小孩子才做选择题！

为什么要用React

1. 使用组件化开发方式，符合现代Web开发的趋势
2. 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
3. 由Facebook专门的团队维护，技术支持可靠
4. 使用方式简单，性能非常高，支持服务端渲染

React 特点

1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React中的核心概念

1. 虚拟DOM（Virtual DOM）
2. Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM (Virtual DOM)

什么是DOM?

DOM (Document Object Model) 译为文档对象模型，是浏览器中的概念，通过JS对象来表示页面上的元素，并提供了操作DOM对象的APl

HTML DOM 树形结构如下：

什么是VituralDOM?

用JS对象结构表示 DOM 树的结构

为什么需要VituralDOM?

既然有了DOM 为啥还需要VituralDOM？

为了实现页面DOM元素的高效更新

举例：比如我们要实现对日期的排序。

1. 表格中的数据通过请求后台加载到前台浏览器内存中，构成一个对象数组

        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }

2. 点击按钮之后需要对内存中的对象数组进行排序，然后输出到HTML中

3. 如何将排序后的数组渲染到页面上？

   • for循环数组，拼接标签,拼接成一个字符串，然后替换掉原先的HTML页面的标签内的内容
     使用模板引擎 比如ejs, 使用for标签实现，其本质上也是拼接成字符串，只是模板引擎帮我们完成了这些的工作。

     上面的方式是否存在性能问题？如何才能做到最优的性能？

     • 按需更新，只重新渲染更新的数据所对应的页面元素

     如何做到按需更新？

     • 获取内存中的新旧两棵DOM树，进行对比，得到需要被按需更新的DOM元素：
     • 一个网页渲染的过程：
       1. 浏览器请求服务器获取页面HTML代码
       2. 浏览器要现在内存中，解析DOM结构，并在存览器内存中，渲染出一棵DOM树
       3. 浏览器把DOM树，呈现到页面上
     • 所以我们需要先获取内存的新旧DOM树，比较之后按需更新，最后在把内存中最新的DOM树渲染到页面上。

     如何获取内存中的新旧两棵DOM树?

     • 浏览器没有提供API去获取浏览器内存中的DOM新旧DOM树。
     • 真正的 DOM 元素非常庞大，这是因为标准就是这么设计的。而且操作它们的时候你要小心翼翼，轻微的触碰可能就会导致页面重排，这可是杀死性能的罪魁祸首
       

     如何解决上述的问题，如何比较新旧两棵DOM树？

     • 聪明的程序员想到了可以通过手工模拟的方式去模拟DOM结构–> 虚拟DOM

     如何模拟DOM树结构？

     • 我们知道通过HTML能描述一个DOM树，除了HTML标签的方式还可以使用什么方式去模拟？—> js对象的方式。相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来
     • 比如我们需要模拟下面这个div标签的DOM节点元素，要怎么用JS对象去描述?

     <div id="myDiv" title="标题">
     		 这是我的Div标签
     		<p>这是一个p标签p>
     div>
     

     • • 通过js对象可以进行如下的描述

     {
        tagName:"div",
        title:"标题",
     	children:[
        		"这是我的Div标签",
           {
           	tagName:"p",
            children:[
             "这是一个p标签"
             ]
           }
        ]
     }
     

     9. 当DOM节点元素发生变化时候，就可以通过虚拟DOM去获取到更新的节点元素。

     比如上面的div节点变成了如下：

     <div id="myDiv" title="标题111">
     		 这是我的Div标签
     		<p>这是一个p标签1111p>
     div>
     

     模拟出来的虚拟DOM表示如下：

     {
         "tagName": "div",
         "title": "标题111",
         "children": [
             "这是我的Div标签",
             {
                 "tagName": "p",
                 "children": [
                     "这是一个p标签111"
                 ]
             }
         ]
     }
     

     通过模拟虚拟DOM就可以很容易知道新旧两个DOM树之间更新的部分在哪里。

     

     简单总结虚拟DOM(Vitural DOM)的处理方式

     1. 用JS对象结构表示DOM树的结构，然后用这个虚拟DOM树构建一个真正的DOM树，插到文档当中
     2. 当状态变更的时候，重新构造一棵新的虚拟DOM树。然后用新的树和旧的树进行比较，记录两棵树差异
     3. 把第2步骤所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

     所以React所有操作都是针对虚拟DOM，然后再把这个虚拟DOM变成浏览器中的DOM元素，最后在渲染到页面上。

     简单总结虚拟DOM

     用JS对象的形式来模拟页面上DOM嵌套关系(虚拟DOM是以JS对象的形式存在的)这就是React 中虚拟DOM的概念

     • 本质：用JS对象模拟DOM元素和嵌套关系
     • 目的：就是为了实现页面元素的高效更新

     Diff算法

     通过前面的虚拟DOM我们就可以模拟出浏览器内存中的新旧DOM树，但是要做到高效的更新，还是离不开高效的更新算法，所以我们下面就要提到Diff算法。

     当使用React的时候，在某个时间点render() 函数创建了一棵React元素树(虚拟DOM树)，
     在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树(虚拟DOM树)，
     React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）

     • 只比较同一层级，不跨级比较

     • tag 不相同，则直接删掉重建，不再深度比较
       

     • tag和key(所以一般list都要求要指定key属性)，两者都相同，则认为是相同节点，不再深度比较

     了解更多

     如何实现一个 Virtual DOM 算法

     理解 Virtual DOM

     React 入门

     环境准备

     搭建本地开发环境

     npx create-react-app my-app
     cd my-app
     npm start
     

     

     参考：https://react.docschina.org/tutorial/tutorial.html#setup-option-2-local-development-environment

     

     开发者工具

     

     

     Hello React

     前面说React 通过读取虚拟DOM(React DOM)，然后使用它们来构建 DOM 以及保持随时更新，所以我们第一步就是需要创建虚拟DOM(React DOM)

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     const title = React.createElement("h1", {className: "main"},
         "Hello React!!") //
     Hello React!!
     ReactDOM.render(title, document.getElementById('root'))
     

     

     嵌套子节点,在

     标签外套一层

     标签：

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     
     const title = React.createElement("h1", {className: "main"},
         "Hello React!!")
     const div = React.createElement("div", {id:"myDiv"},
         "这是个Div",title) //
     这是个Div
     Hello React!!
     ReactDOM.render(div, document.getElementById('root'))
     

     createElement()的问题

     说明：createElement()方式，代码编写不友好，太复杂

     var dv = React.createElement(
       "div",
       { className: "shopping-list" },
       React.createElement(
         "h1",
         null,
         "Shopping List for "
       ),
       React.createElement(
         "ul",
         null,
         React.createElement(
           "li",
           null,
           "Instagram"
         ),
         React.createElement(
           "li",
           null,
           "WhatsApp"
         )
       )
     )
     // 渲染
     ReactDOM.render(dv, document.getElementById('root'))
     

     JSX 的基本使用

     • JSX语法，最终会被编译为createElement()方法
     • 推荐：使用 JSX 的方式创建组件
     • JSX - JavaScript XML
     • JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行

     JSX的注意点

     • 如果在 JSX 中给元素添加类, 需要使用 className 代替 class, 因为class是js的关键字
     • 在 JSX 中注释语法：{/* 中间是注释的内容 */}

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <h1 className="main">Hello, React! {/*这是注释*/}</h1>,
         document.getElementById('root')
     );
     
     

     

     • 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <h1 className="main">Hello, React! {alert("Hello World")}</h1>,
         document.getElementById('root')
     );
     

     

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     const a1 = true
     const a2 = 100
     const a3 = "Hello React"
     const a4 = new Date()
     const element = <h1>Hello, {a3}</h1> //React元素
     const user = {firstName:'Kevin',lastName:'Cai'}
     function fun(user){
       return user.firstName + ' ' + user.lastName;
     }
     ReactDOM.render(
         <div>
           <h1>{a1.toString()}</h1>
           <h1>{a2 + 1}</h1>
           <h1>{a3}</h1>
           <h1>{a4.toLocaleString()}</h1>
           <h1>{a1 ? "条件为真" : "条件为假"}</h1>
           {element}
           {fun(user)}
         </div>,
         document.getElementById('root')
     )
     

     

     • 在JSX中只有一个根结点

     下面这种方式是有问题的

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <h1 className="main">Hello, React!</h1>
         <h1>Hello World!</h1>,
         document.getElementById('root')
     );
     

     

     下面这种方式才是OK的:

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <div>
           <h1 className="main">Hello, React!</h1>
           <h1>Hello World!</h1>
         </div>,
         document.getElementById('root')
     )
     

     

     • 在JSX中节点元素必须闭合，要符合XML规范

     下面这种方式在编译的时候就会报错了

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <div>
           <h1 className="main">Hello, React!</h1>
           <hr>
           <h1>Hello World!</h1>
         </div>,
         document.getElementById('root')
     )
     

     节点元素必须要闭合

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     ReactDOM.render(
         <div>
           <h1 className="main">Hello, React!</h1>
           <hr/>
           <h1>Hello World!</h1>
         </div>,
         document.getElementById('root')
     )
     

     

     

     React组件

     React创建组件的两种方式

     • 通过 JS函数创建（无状态组件）
     • 通过 class创建（有状态组件）

     1. 定义组件最简单的方式就是编写 JavaScript 函数

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     function Welcome(props) {
       return <h1>Hello, {props.name}</h1>;
     }
     
     const element = <Welcome name="Kevin" />;
     ReactDOM.render(
         element,
         document.getElementById('root')
     );
     

     该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

     【注意】

     • 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     class welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }
     
     const element = <welcome name="Kevin" />;
     ReactDOM.render(
         element,
         document.getElementById('root')
     );
     

     如果函数名称是小写，React是不会把它当做一个组件，所以页面上是不会显示的。

     

     • 函数必须有返回值，返回值可以是：JSX对象或null
     • 返回的JSX，必须有一个根元素
     • 组件的返回值使用()包裹，避免换行问题

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     class Welcome extends React.Component {
       render() {
         return 
         <h1>Hello, {this.props.name}</h1>;
       }
     }
     
     const element = <Welcome name="Kevin" />;
     ReactDOM.render(
         element,
         document.getElementById('root')
     );
     

     

     这个时候可以使用()来包裹，避免换行的问题，建议都加上，避免格式化问题导致出问题。

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     class Welcome extends React.Component {
       render() {
         return(
         <h1>Hello, {this.props.name}</h1>);
       }
     }
     
     const element = <Welcome name="Kevin" />;
     ReactDOM.render(
         element,
         document.getElementById('root')
     );
     

     

     2. 同时还可以使用 ES6 的 class 来定义组件：

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     //  react对象继承字React.Component
     class Welcome extends React.Component {
     // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }
     
     const element = <Welcome name="Kevin" />;
     ReactDOM.render(
         element,
         document.getElementById('root')
     );
     

     

     上述两个组件在 React 里是等效的。

     函数式组件 和 class 组件的使用场景

     1. 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
     2. 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

     给组件传递数据

     • 组件中有一个 只读的对象 叫做 props，无法给props添加属性
     • 获取方式：函数参数 props
     • 作用：将传递给组件的属性转化为 props 对象中的属性

     import React from 'react'
     import ReactDOM from 'react-dom'
     import './index.css'
     
     function Welcome(props) {
       // props ---> { name: 'Kevin', age: 20 }
       return (
           <div>
             <div>Welcome React</div>
             <h3>姓名：{props.name}----年龄是：{props.age}</h3>
           </div>
       )
     }
     
     //传递 props：name 和 age(如果你想要传递number类型数据 就需要向下面这样)
     const element = <Welcome name="Kevin" age={20}/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     封装组件到独立的文件中

     Vue.js是使用.vue文件来声明一个组件，同样React也可以把我们的自定义组件封装到一个独立的文件中。

     // 1. 引入React模块
     // 由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先拿到React。
     import React from 'react'
     import '../index.css'
     // 2. 使用function构造函数创建组件
     function Welcome(props) {
       return (
           <div>
             <div className="main">Welcome React</div>
             <h3>姓名：{props.name}----年龄是：{props.age}</h3>
           </div>
       )
     }
     // 3. 导出组件
     export default Welcome
     

     使用import Welcome from './component/Welcome' 来导入组件

     import React from 'react'
     import ReactDOM from 'react-dom'
     import Welcome from './component/Welcome'
     
     //传递 props：username 和 age(如果你想要传递number类型数据 就需要向下面这样)
     const element = <Welcome name="Kevin" age={20}/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     props和state

     props

     • 作用：给组件传递数据，一般用在父子组件之间
     • 说明：React把传递给组件的属性转化为一个对象并交给 props
     • 特点：props是只读的，无法给props添加或修改属性

     // props 是一个包含数据的对象参数，不要试图修改 props 参数
     // 返回值：react元素
     function Welcome(props) {
       // 返回的 react元素中必须只有一个根元素
       return <div>hello, {props.name}</div>
     }
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props)
       }
     
       render() {
         return <h1>Hello, {this.props.name}</h1>
       }
     }
     

     state

     状态即数据

     • 作用：用来给组件提供组件内部使用的数据
     • 注意：只有通过class创建的组件才具有状态
     • 注意：状态是私有的，完全由组件来控制

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props)
         this.state = {
           name: 'Kevin'
         }
       }
     
       render() {
         return <h1>Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     组件的生命周期

     简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

     组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

     组件生命周期函数总览

     组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

     组件生命周期 - 创建阶段(Mounting)

     • constructor()
       • 作用：获取props和初始化state
       • 说明：通过 constructor() 的参数props获取
       • 设置state和props

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
       }
     
       render() {
         return <h1>Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     • componentWillMount()
       • 说明：组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染
       • 注意：无法获取页面中的DOM对象
       • 注意：可以调用 setState() 方法来改变状态值
       • 用途：发送ajax请求获取数据

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
       }
     
       //组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染
       componentWillMount() {
         console.warn(document.getElementById('hello')) // null
         this.setState({
           name: "Kevin Cai"
         })
       }
     
       render() {
         return <h1 id="hello">Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     

     • render()
       • 作用：渲染组件到页面中，无法获取页面中的DOM对象
       • 注意：不要在render方法中调用 setState() 方法，否则会递归渲染
       • 原因说明：状态改变会重新调用render()，render()又重新改变状态

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
       }
       //渲染组件到页面中，无法获取页面中的DOM对象
       render() {
         console.warn(document.getElementById('hello')) // null
         return <h1 id="hello">Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     

     不要再render方法中更新state,状态改变会重新调用render()，render()又重新改变状态,会导致无限递归

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
       }
     
       //渲染组件到页面中，无法获取页面中的DOM对象
       render() {
         console.warn(document.getElementById('hello')) // null
         this.setState({
           name: "Kevin Cai"
         })
         return <h1 id="hello">Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     • componentDidMount()
       • 组件已经挂载到页面中
       • 可以进行DOM操作，比如：获取到组件内部的DOM对象
       • 可以发送请求获取数据
       • 可以通过 setState() 修改状态的值
       • 注意：在这里修改状态会重新渲染

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     
     class Welcome extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
       }
     
       componentDidMount() {
         // 此时，就可以获取到组件内部的DOM对象
         console.warn(document.getElementById('hello')) 
       }
       render() {
         return <h1 id="hello">Hello, {this.state.name}</h1>
       }
     }
     
     const element = <Welcome name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     组件生命周期 - 运行阶段（Updating）

     • 特点：该阶段的函数执行多次
     • 说明：每当组件的props或者state改变的时候，都会触发运行阶段的函数

     • componentWillReceiveProps()
       • 说明：组件接受到新的props前触发这个方法，props改变
       • 参数：当前组件props值
       • 可以通过 this.props 获取到上一次的值
       • 使用：若你需要响应属性的改变，可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变
       • 注意：修改state不会触发该方法

     通过如下的代码来演示props的改变：

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Parent extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //设置state和props
           name: props.name
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.setState({
           name: "Kevin Cai"
         })
       }
     
       render() {
         return <button id="hello" onClick={this.handleClick}>
           Parent - Hello {this.state.name}, <Child name={this.state.name}/>
         </button>
       }
     }
     
     class Child extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
       }
     
       componentWillReceiveProps(nextProps) {
         console.log("Child - componentWillReceiveProps")
         console.log(`this.props-->${JSON.stringify(this.props)}`)
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
       }
     
       render() {
         return <h3>Child - Hello, {this.props.name}</h3>
       }
     }
     
     const element = <Parent name="Kevin"/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     

     • shouldComponentUpdate()
       • 作用：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染
       • 优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能
       • 说明：如果返回值为false，那么，后续render()方法不会被调用
       • 注意：这个方法必须返回布尔值！！！
       • 场景：根据随机数决定是否渲染组件,或者比如进度条的更新。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = {
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.setState(state => ({
           count: state.count + 1
         }))
       }
     
       // - 参数：
     //   - 第一个参数：最新属性对象
     //   - 第二个参数：最新状态对象
       shouldComponentUpdate(nextProps, nextState) {
         console.log('shouldComponentUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
         return nextState.count % 2 === 0
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}
         </button>
       }
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     

     • componentWillUpdate()
       • 作用：组件将要更新
       • 参数：最新的属性和状态对象
       • 注意：不能修改状态 否则会循环渲染

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = {
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.setState(state => ({
           count: state.count + 1
         }))
       }
     
     
       shouldComponentUpdate(nextProps, nextState) {
         console.log('shouldComponentUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
         return nextState.count % 2 === 0
       }
     
       componentWillUpdate(nextProps, nextState) {
         console.log('componentWillUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}
         </button>
       }
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     

     • render() 渲染
       • 作用：重新渲染组件，与Mounting阶段的render是同一个函数
       • 注意：这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = {
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.setState(state => ({
           count: state.count + 1
         }))
       }
     
     
       shouldComponentUpdate(nextProps, nextState) {
         console.log('shouldComponentUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
         return nextState.count % 2 === 0
       }
     
       componentWillUpdate(nextProps, nextState) {
         console.log('componentWillUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
       }
     
       render() {
         console.log("render.....")
         return <button onClick={this.handleClick}>{this.state.count}
         </button>
       }
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     • componentDidUpdate()
       • 作用：组件已经被更新
       • 参数：旧的属性和状态对象

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = {
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.setState(state => ({
           count: state.count + 1
         }))
       }
     
     
       shouldComponentUpdate(nextProps, nextState) {
         console.log('shouldComponentUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
         return nextState.count % 2 === 0
       }
     
       componentWillUpdate(nextProps, nextState) {
         console.log('componentWillUpdate')
         console.log(`nextProps-->${JSON.stringify(nextProps)}`)
         console.log(`nextState-->${JSON.stringify(nextState)}`)
       }
     
       render() {
         console.log("render.....")
         return <button onClick={this.handleClick}>{this.state.count}
         </button>
       }
     
       componentDidUpdate(prevProps, prevState) {
         console.log('componentDidUpdate')
         console.log(`prevProps-->${JSON.stringify(prevProps)}`)
         console.log(`prevState-->${JSON.stringify(prevState)}`)
       }
     
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     组件生命周期 - 卸载阶段（Unmounting）

     • 组件销毁阶段：组件卸载期间，函数比较单一，只有一个函数，这个函数也有一个显著的特点：组件一辈子只能执行依次！
     • 使用说明：只要组件不再被渲染到页面中，那么这个方法就会被调用（ 渲染到页面中 -> 不再渲染到页面中 ）

     • componentWillUnmount()
       • 作用：在卸载组件的时候，执行清理工作，比如
         • 清除定时器
         • 清除componentDidMount创建的DOM对象

     了解更多

     
     上图参考自下方链接的博文

     React生命周期的图解

     React生命周期图解

     生命周期图谱

     state和setState

     • 注意：使用 setState() 方法修改状态，状态改变后，React会重新渲染组件
     • 注意：不要直接修改state属性的值，这样不会重新渲染组件！！！

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = {
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         this.state.count = 1 //这样方式，不会重新渲染组件
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     • 使用：
       • 初始化state
       • setState修改state

     使用的正确姿势：

     • 修改state的方式一

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //初始化 state
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         // 修改 state 的值
         // 方式一：
         this.setState({
           count: this.state.count + 1
         })
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     • setState() 是异步操作

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //初始化 state
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         // 修改 state 的值
         // 方式一：
         this.setState({
           count: this.state.count + 1
         })
         console.log(this.state.count) //输出当前的this.state.count
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     可以看到输出的结果并不是最新的，说明setState方法并不是同步的，而是异步的。

     那如果我们就想要拿到最新的count的结果呢? 要怎么做?

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //初始化 state
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         // 修改 state 的值
         // 方式一：
         this.setState({
           count: this.state.count + 1
         },function(){
           // 由于 setState() 是异步操作，所以，如果想立即获取修改后的state
           // 需要在回调函数中获取
           console.log(this.state.count) //输出当前的this.state.count
         })
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     • 修改state的方式二

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //初始化 state
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         // 修改 state 的值
         // 方式二：
         this.setState(function(prevState, props) {
           console.log("prevState:",prevState)
           console.log("props:",props)
           return {
             count: prevState.count + props.increment
           }
         })
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter increment = {1}/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     

     或者还可以写成如下：

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Counter extends React.Component {
       constructor(props) {
         super(props) //通过 constructor() 的参数props获取
         this.state = { //初始化 state
           count: 0
         }
         // 为了在回调中使用 `this`，这个绑定是必不可少的
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         // 修改 state 的值
         // 方式二：
         // 或者 - 注意： => 后面需要带有小括号，因为返回的是一个对象
         this.setState((prevState, props) => ({
           count: prevState.count + props.increment
         }))
       }
     
       render() {
         return <button onClick={this.handleClick}>{this.state.count}</button>
       }
     
     }
     
     const element = <Counter increment = {1}/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     组件绑定事件

     React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

     • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
     • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

     例如，传统的 HTML：

     <button onclick="activateLasers()">
       Activate Lasers
     button>
     

     在 React 中略微不同：

     <button onClick={activateLasers}>
       Activate Lasers
     button>
     

     在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

     <a href="#" onclick="console.log('The link was clicked.'); return false">
       Click me
     a>
     

     在 React 中，可能是这样的：

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function ActionLink() {
       function handleClick(e) {
         e.preventDefault();
         console.log('The link was clicked.');
       }
     
       return (
           <a href="#" onClick={handleClick}>
             Click me
           </a>
       );
     }
     
     const element = <ActionLink/>
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

     事件绑定中的this

     必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class Toggle extends React.Component {
       constructor(props) {
         super(props);
         this.state = {isToggleOn: true};
       }
     
       handleClick() {
         console.log(this)
         this.setState(state => ({
           isToggleOn: !state.isToggleOn
         }));
       }
     
       render() {
         return (
             <button onClick={this.handleClick}>
               {this.state.isToggleOn ? 'ON' : 'OFF'}
             </button>
         );
       }
     }
     
     ReactDOM.render(
         <Toggle />,
         document.getElementById('root')
     );
     

     

     通过bind绑定

     • 原理：bind能够调用函数，改变函数内部this的指向，并返回一个新函数
     • 说明：bind第一个参数为返回函数中this的指向，后面的参数为传给返回函数的参数

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class MyButton extends React.Component {
       constructor(props) {
         super(props);
         this.state = {msg : "button"}
       }
     
       handleClick() {
         console.log(this)
         this.setState({
           msg: '点击事件修改state的值'
         })
       }
     
       render() {
         return (
             <button onClick={this.handleClick.bind(this)}>
               {this.state.msg}
             </button>
         )
       }
     }
     
     ReactDOM.render(
         <MyButton />,
         document.getElementById('root')
     )
     

     

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class MyButton extends React.Component {
       constructor(props) {
         super(props);
         this.state = {msg : "button"}
       }
     
       handleClick(arg1, arg2) {
         console.log(this)
         this.setState({
           msg: '点击事件修改state的值' + arg1 + arg2
         })
       }
     
       render() {
         return (
             // 有参数
             <button onClick={this.handleClick.bind(this, 'abc', [1, 2])}>
               {this.state.msg}
             </button>
         )
       }
     }
     
     ReactDOM.render(
         <MyButton />,
         document.getElementById('root')
     )
     
     

     

     • 在构造函数中使用bind

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class MyButton extends React.Component {
       constructor(props) {
         super(props);
         this.state = {msg : "button"}
     
         this.handleClick = this.handleClick.bind(this)
       }
     
       handleClick() {
         console.log(this)
         this.setState({
           msg: '点击事件修改state的值'
         })
       }
     
       render() {
         return (
             <button onClick={this.handleClick}>
               {this.state.msg}
             </button>
         )
       }
     }
     
     ReactDOM.render(
         <MyButton />,
         document.getElementById('root')
     )
     

     

     通过箭头函数绑定

     • 原理：箭头函数中的this由所处的环境决定，自身不绑定this

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class MyButton extends React.Component {
       constructor(props) {
         super(props);
         this.state = {msg : "button"}
       }
     
       handleClick(arg1, arg2) {
         console.log(this)
         this.setState({
           msg: '点击事件修改state的值' + arg1 + arg2
         })
       }
     
       render() {
         return (
             <button onClick={() => { this.handleClick('参数1', '参数2') }}>
               {this.state.msg}
             </button>
         )
       }
     }
     
     ReactDOM.render(
         <MyButton />,
         document.getElementById('root')
     )
     

     

     条件渲染

     React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function UserGreeting(props) {
       return <h1>Welcome back!</h1>;
     }
     
     function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
     }
     
     
     function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       if (isLoggedIn) {
         return <UserGreeting />;
       }
       return <GuestGreeting />;
     }
     
     ReactDOM.render(
         // Try changing to isLoggedIn={true}:
         <Greeting isLoggedIn={false} />,
         document.getElementById('root')
     );
     

     

     • 与运算符 &&

     通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function UserGreeting(props) {
       return <h1>Welcome back!</h1>;
     }
     
     function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
     }
     
     
     function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       return isLoggedIn && <UserGreeting />;
     }
     
     ReactDOM.render(
         // Try changing to isLoggedIn={true}:
         <Greeting isLoggedIn={true} />,
         document.getElementById('root')
     );
     

     true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
     因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

     

     • 三目运算符

     另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function UserGreeting(props) {
       return <h1>Welcome back!</h1>;
     }
     
     function GuestGreeting(props) {
       return <h1>Please sign up.</h1>;
     }
     
     
     function Greeting(props) {
       const isLoggedIn = props.isLoggedIn;
       //三目运算符
       return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
     }
     
     ReactDOM.render(
         // Try changing to isLoggedIn={true}:
         <Greeting isLoggedIn={false} />,
         document.getElementById('root')
     );
     

     

     列表 & Key

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function NumberList(props) {
       const numbers = props.numbers;
       const listItems = numbers.map((number) =>
           <li>{number}</li>
       );
       return (
           <ul>{listItems}</ul>
       );
     }
     
     const numbers = [1, 2, 3, 4, 5];
     ReactDOM.render(
         <NumberList numbers={numbers} />,
         document.getElementById('root')
     );
     

     

     当我们运行这段代码，将会看到一个警告 Warning: Each child in a list should have a unique “key” prop.，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。

     key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function NumberList(props) {
       const numbers = [1, 2, 3, 4, 5];
       const listItems = numbers.map((number) =>
           <li key={number.toString()}>
             {number}
           </li>
       );
       return (
           <ul>{listItems}</ul>
       );
     }
     
     const numbers = [1, 2, 3, 4, 5];
     ReactDOM.render(
         <NumberList numbers={numbers} />,
         document.getElementById('root')
     );
     

     一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用数据中的 id 来作为元素的 key

     当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     function NumberList(props) {
       const listItems = props.numbers.map((number, index) =>
           <li key={index}>
             {number}
           </li>
       )
       return (
           <ul>{listItems}</ul>
       )
     }
     
     const numbers = [1, 2, 3, 4, 5]
     ReactDOM.render(
         <NumberList numbers={numbers}/>,
         document.getElementById('root')
     )
     

     受控组件

     在HTML当中，像input,textarea和select这类表单元素会维持自身状态，并根据用户输入进行更新。
     在React中，可变的状态通常保存在组件的state中，并且只能用 setState() 方法进行更新.
     React根据初始状态渲染表单组件，接受用户后续输入，改变表单组件内部的状态。
     因此，将那些值由React控制的表单元素称为：受控组件。

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class NameForm extends React.Component {
       constructor(props) {
         super(props);
         this.state = {value: ''};
     
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
       }
     
       handleChange(event) {
         this.setState({value: event.target.value});
       }
     
       handleSubmit(event) {
         alert('提交的名字: ' + this.state.value);
         event.preventDefault();
       }
     
       render() {
         return (
             <form onSubmit={this.handleSubmit}>
               <label>
                 名字:
                 <input type="text" value={this.state.value} onChange={this.handleChange} />
               </label>
               <input type="submit" value="提交" />
             </form>
         );
       }
     }
     
     ReactDOM.render(
         <NameForm/>,
         document.getElementById('root')
     )
     

     

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class EssayForm extends React.Component {
       constructor(props) {
         super(props);
         this.state = {
           value: '请撰写一篇关于你喜欢的 DOM 元素的文章.'
         };
     
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
       }
     
       handleChange(event) {
         this.setState({value: event.target.value});
       }
     
       handleSubmit(event) {
         alert('提交的文章: ' + this.state.value);
         event.preventDefault();
       }
     
       render() {
         return (
             <form onSubmit={this.handleSubmit}>
               <label>
                 文章:
                 <textarea value={this.state.value} onChange={this.handleChange} />
               </label>
               <input type="submit" value="提交" />
             </form>
         );
       }
     }
     
     ReactDOM.render(
         <EssayForm/>,
         document.getElementById('root')
     )
     

     

     import React from 'react'
     import ReactDOM from 'react-dom'
     
     class FlavorForm extends React.Component {
       constructor(props) {
         super(props);
         this.state = {value: '葡萄柚'};
     
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
       }
     
       handleChange(event) {
         this.setState({value: event.target.value});
       }
     
       handleSubmit(event) {
         alert('你喜欢的风味是: ' + this.state.value);
         event.preventDefault();
       }
     
       render() {
         return (
             <form onSubmit={this.handleSubmit}>
               <label>
                 选择你喜欢的风味:
                 <select value={this.state.value} onChange={this.handleChange}>
                   <option value="葡萄柚">葡萄柚</option>
                   <option value="酸橙">酸橙</option>
                   <option value="椰子">椰子</option>
                   <option value="芒果">芒果</option>
                 </select>
               </label>
               <input type="submit" value="提交" />
             </form>
         );
       }
     }
     
     ReactDOM.render(
         <FlavorForm/>,
         document.getElementById('root')
     )
     

     

     学习参考

     React入门看这篇就够了

     React官网文档

     React 菜鸟教程

     你可能感兴趣的:(React.js)

     • 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.jsbootstrap前端
       在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 钟念 前端开发前端开发框架前端bootstrapvue.jshtmljavascript前端框架css
       常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo
     • 常见的web前端开发框架：Vue.js 钟念 前端开发前端开发框架前端vue.jsjavascriptvue前端框架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.jsjavascripttypescriptnpmhtml5
       常见的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.jsnode.jsmongodb
       详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环
     • React 与 Angular：项目的最佳框架 千源万码 react.jsangular.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 来构建界面 张培跃吧 Reactreact.jsjavascriptecmascript
       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.jssass前端编程项目
       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 搭建个人博客，从入门到吃鸡 蓝桥云课 webreactjs
       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代码 javascriptreact.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事件绑定原
     • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
               这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
     • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
       内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
     • web.xml报错 crabdave web.xml
       web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
     • 泛型类的自定义 麦田的设计者 javaandroid泛型
          为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
     • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
       清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
     • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
       1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
     • linux下安装maven 无量 mavenlinux安装
       Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
     • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
       1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
     • 关于领号活动总结 alafqq 活动
       关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
     • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
       java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
     • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
       如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
     • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
       JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
     • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
       父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
     • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
       1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
     • WAS各种脚本作用大全 ronin47 WAS 脚本
       　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
     • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
       借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
     • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
       Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
     • spring 定时任务中cronExpression表达式含义 chicony cronExpression
       一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
     • Nutz配置Jndi ctrain JNDI
       1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
     • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
       在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
     • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
         Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
     • Android实用小技巧 dcj3sjt126com android
       1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
     • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
       转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
     • 有“品”的程序员 gongmeitao 工作
       完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
     • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
       本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
     • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
       SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
     • 链表栈 luyulong java数据结构
       public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
     • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
         Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
     • spring配置定时任务 stunizhengjia springtimer
       最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
     • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
       ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http

     按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

     首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

     版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.