1.react 基础 (创建组件及在浏览器上渲染组件)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码 // 8.需求:渲染一行标题,显示"Hello React"
//
/*
ReactDOM.render()
React的基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中 3个参数
第一个:模板的渲染内容(HTML形式)
第二个:这段模板需要插入的DOM节点(本程序中,是id为container的div节点)
第三个:渲染后的回调,一般不用
*/ // ReactDOM.render(
// <h1>Hello React</h1>,
// document.getElementById("container")
// ); /*
JSX入门 JSX不是一门新的语言,是个语法(语法糖)
*/ // 1.JSX必须借助React环境运行 // 2.JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来,
// 可以像XML一样书写 ReactDOM.render(
<h1>
Hello React
</h1>,
document.getElementById("container")
); // 3.转换:JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转化成JavaScript代码执行 ReactDOM.render(
React.createElement("h1",null,"Hello React"),
document.getElementById("container")
); // 4.在JSX中运行JavaScript代码
// 使用{}括起来 {表达式}
// var text = "百度";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
); // 5.例如:属性、设置样式、事件绑定
</script>
</html>

2.设置组件样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> <style>
.pStyle {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码 /*
创建一个组件类,用于输出Hello React 1.React中创建的组件类以大写字母开头,驼峰命名法
2.在React中使用React.createClass方法创建一个组件类
3.核心代码:每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值:null、false、组件模板
4.注意:组件类只能包含一个顶层标签
*/ // var HelloMessage = React.createClass({
// render:function(){
// return <h1>Hello React</h1>;
// }
// }); // // 渲染
// ReactDOM.render(
// // 在模板中插入<HelloMessage />会自动生成一个实例
// <HelloMessage />,
// document.getElementById("container")
// ); /*
设置组件的样式,三种:
1.内联样式
2.对象样式
3.选择器样式 注意:在React和HTML5中设置样式时的书写格式是有区别的
* 1.HTML5以 ; 结尾
React以 , 结尾
* 2.HTML5中key、value都不加引号
React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法(例:backgroundColor)。如果value为字符串,需要加引号。
* 3.HTML5中,value如果是数字,需要带单位
React中不需要带单位 * 我们定义一个组件类,同时使用三种设置组件样式的方式
* 需求:定义一个组件,分为上下两行显示内容
* <div> 内联样式:设置背景颜色,边框大小,边框颜色
* <h1></h1> 对象样式:设置背景颜色,字体颜色
* <p></p> 选择器样式:设置字体大小
* </div>
*
* class 和 for 是React中的保留字
* 注意:在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换。
* 类似的:使用htmlFor替换for
*/ // 创建设置h1样式对象
var hStyle = {
backgroundColor:"green",
color:"red"
}
// 创建组件 通过this.props传值
var ShowMessage = React.createClass({
render:function() {
return (
// 外面的{}是JSX语法,里面的{}表示对象
<div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
}); ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="世界" />,
document.getElementById("container")
);
</script>
</html>

3.复合组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码 /*
复合组件 也被称为组合组件,创建多个组件合成一个组件。
*/ /*
定义一个组件WebShow。功能:输出网站的名字和网址,网址是一个可以点击的链接。
分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,兵器可以点击
*/ // 定义WebName组件
var WebName = React.createClass({
render:function() {
return <h1>百度</h1>;
}
}); // 定义WebLink组件
var WebLink = React.createClass({
render:function() {
return <a href="http://www.baidu.com">http://www.baidu.com</a>;
}
}); // 定义复合组件 WebShow
var WebShow = React.createClass({
render:function() {
return (
// 嵌套组件
<div>
<WebName />
<WebLink />
</div>
);
}
}); // 将组件类WebShow渲染到网页上
ReactDOM.render(
<WebShow />,
document.getElementById("container")
);
</script>
</html>

4.props 传值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码
/*
props、state
props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递)
注意:props对象中属性与组件的属性一一对应,不要直接去修改props中属性的值
*/ /*
定义一个组件WebShow。功能:输出网站的名称和地址,网址是一个可以点击的链接
分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击 思路:
1.给WebShow设置两个属性,wname,wlink
2.WebShow的props对象增加了两个属性值
3.WebName从WebShow的props对象中获取wname的值,即网站的名称。
*/ // 定义WebName
var WebName = React.createClass({
render:function() {
return <h1>{this.props.webname}</h1>;
}
}); // 定义WebLink
var WebLink = React.createClass({
render:function() {
return <a href={this.props.weblink}>{this.props.weblink}</a>;
}
}); // 定义WebShow
var WebShow = React.createClass({
render:function() {
return (
<div>
<WebName webname={this.props.wname} />
<WebLink weblink={this.props.wlink} />
</div>
);
}
}); // 渲染
ReactDOM.render(
<WebShow wname="百度" wlink="http://www.baidu.com" />,
document.getElementById("container")
); /*
...this.props
props提供的语法糖,可以将父组件中的全部属性都复制给子组件 需求:定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有属性全部从父组件复制得到
*/ var Link = React.createClass({
render:function(){
return <a {...this.props}>{this.props.name}</a>;
}
}); ReactDOM.render(
<Link href="http://www.baidu.com" name="百度" />,
document.getElementById("container")
); /*
this.props.children children是一个例外,不是跟组件的属性对应的。
表示组件的所有子节点 HTML5中有一种标签:列表<ul> <ol> <li> 定义一个列表组件,列表项中显示的内容,以及列表项的数量都由外部决定
*/ var ListComponent = React.createClass({
render:function() {
return (
<ul>
{
/*
列表项数量以及内容不确定,在创建模板时才能确定
利用this.props.children从父组件获取需要展示的列表项内容 获取到列表项内容后,需要遍历children,逐项进行设置
使用React.Children.map方法
返回值:数组对象。这里数组中的元素是<li>
*/
React.Children.map(this.props.children, function(child) {
// child是遍历得到的父组件的子节点
return <li>{child}</li>
})
}
</ul>
);
}
}); ReactDOM.render(
(
<ListComponent>
<h1>百度</h1>
<a href="http://www.baidu.com">http://www.baidu.com</a>
</ListComponent>
),
document.getElementById("container")
); /*
属性验证 propTypes 组件类的属性 用于验证组件实例的属性是否符合要求
*/ var ShowTitle = React.createClass({
propTypes: {
// title 数据类型必须为字符串
title: React.PropTypes.string.isRequired
},
render:function() {
return <h1>{this.props.title}</h1>
}
}); ReactDOM.render(
<ShowTitle title="123" />,
document.getElementById("container")
); /*
设置组件属性的默认值 通过实现组件的getDefaultProps方法,对属性设置默认值
*/ var MyTitle = React.createClass({
getDefaultProps:function() {
return {
title:"百度"
}
},
render:function() {
return <h1>{this.props.title}</h1>;
}
}); ReactDOM.render(
<MyTitle />,
document.getElementById("container")
);
</script>
</html>

5.state管理 及 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码 /*
事件处理 react中的事件名称,首字母小写,驼峰命名法 案例:定义组件,组件中包含一个button,给button绑定onClick事件
*/
var MyButton = React.createClass({
handleClick:function(){
alert("点击按钮触发的效果");
},
render:function(){
return (
<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
);
}
}); ReactDOM.render(
<MyButton buttonTitle="按钮" />,
document.getElementById("container")
); /*
state 状态
props
组件自身的属性 this.state
*/ // 需求:创建一个CheckButton的组件,包含一个checkbox类型 <input>
// 复选框在选中和未选中两种状态下会显示不同的文字。即根据状态渲染。 var CheckButton = React.createClass({
// 定义初始状态
getInitialState:function() {
return {
// 返回的是一个对象 里面包含设置的状态 和 初始值
// 在这个对象中设置的属性,将会储存在state中
// 默认状态,未选中
isCheck: false
}
},
// 定义事件绑定的方法
handleChange:function() {
// 修改状态值,通过this.state读取设置的状态值
this.setState({
isCheck:!this.state.isCheck
});
},
render:function(){
// 根据状态值,设置显示的文字
// 注:在JSX语法中,不能直接使用if else,使用三目运算符
var text = this.state.isCheck ? "已选中" : "未选中";
return (
<div>
<input type="checkbox" onChange={this.handleChange} />
{text}
</div>
);
}
}); ReactDOM.render(
<CheckButton />,
document.getElementById("container")
); /*
需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:
组件与用户交互过程中,存在状态的变化,即输入框的值
*/ var Input = React.createClass({
getInitialState:function() {
return {
value:"请输入"
};
},
handleChange:function(event) {
// 通过event.target.value读取用户输入的值
this.setState({
value: event.target.value
});
},
render:function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
}); ReactDOM.render(
<Input />,
document.getElementById("container")
);
</script>
</html>

6.react 生命周期

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.react.js是React的核心库 -->
<script src="js/react.min.js" charset="utf-8"></script>
<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
<script src="js/react-dom.min.js" charset="utf-8"></script>
<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
<script src="js/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
<div id="container"> </div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
// 7.在此处编写React代码 /*
生命周期介绍: 1.组件的生命周期可分成三个状态:
Mounting:组件挂载,已插入真实 DOM
Updating:组件更新,正在被重新渲染
Unmounting:组件移出,已移出真实 DOM 2.组件的生命周期可分成四个阶段:
创建、实例化、更新、销毁 3.网页新闻列表页面
*/ /*
1.Mounting/组件挂载相关:
(1) componentWillMount
组件将要挂载。在render之前执行,但仅执行一次,即使多次重复渲染该组件,或者改变了组件的state
(2) componentDidMount
组件已经挂载。在render之后执行,同一个组件重复渲染只执行一次 2.Updating/组件更新相关:
(1) componentWillReceiveProps(object nextProps)
已加载组件收到新的props之前调用,注意组件初始化渲染时则不会执行
(2) shouldComponentUpdate(object nextProps,object nextState)
组件判断是否重新渲染时调用。该接口实际是在组件接收到新的 props 或者新的 state 的时候 会立即调用,然后通过
(3) componentWillUpdate(object nextProps,object nextState)
组件将要更新
(4) componentDidUpdate(object prevProps,object prevState)
组件已经更新 3.Unmounting/组件移除相关:
(1) componentWillUnmount
在组件要被移除之前的时间点触发,可以利用该方法来执行一些必要的清理组件将要移除 4.生命周期中与props和state相关:
(1) getDefaultProps 设置props属性默认值
(2) getInitialState 设置state属性初始值
*/ /*
生命周期各阶段介绍
*/
var Demo = React.createClass({
/*
一、创建阶段
流程:
只调用getDefaultProps方法
*/
getDefaultProps:function() {
// 在创建类的时候被调用,设置this.props的默认值
console.log("getDefaultProps--创建组件,设置this.props默认值");
return {}
}, /*
二、实例化阶段
流程:
getInitialState
componentWillMount
render
componentDidMount
*/
getInitialState:function() {
// 设置this.state的默认值
console.log("getInitialState--实例化组件,设置this.state的默认值");
return null;
},
componentWillMount:function() {
// 在render之前调用
console.log("componentWillMount--组件将要挂载");
},
render:function() {
// 渲染并返回一个虚拟DOM
console.log("render--渲染组件");
return <div>Hello React</div>
},
componentDidMount:function() {
// 在render之后调用
// 在该方法中,React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
// 可以在这个方法中读取DOM节点
console.log("componentDidMount--组件已经挂载");
}, /*
三、更新阶段
流程:
componentWillReceiveProps
shouldComponentUpdate 如果返回值是false,后三个方法不执行
componentWillUpdate
render
componentDidUpdate
*/ componentWillReceiveProps:function() {
console.log("componentWillReceiveProps--已加载组件收到新的props之前调用");
},
shouldComponentUpdate:function() {
// 是否需要更新
console.log("shouldComponentUpdate--组件判断是否重新渲染时调用");
return true;
},
componentWillUpdate:function() {
console.log("componentWillUpdate--组件将要更新");
},
componentDidUpdate:function() {
console.log("componentDidUpdate--组件已经更新");
},
/*
四、销毁阶段
流程:
componentWillUnmount
*/
componentWillUnmount:function() {
console.log("componentWillUnmount--在组件要被移除之前的时间点触发");
}
}); // 第一次创建并加载组件
ReactDOM.render(
<Demo />,
document.getElementById("container")
); // 重新渲染组件
ReactDOM.render(
<Demo />,
document.getElementById("container")
); // 移除组件
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
</script>
</html>

7.index.android.js 详解

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ /*
第一部分 导入ReactNative包,导入ReactNative组件
AppRegistry: JS运行所有ReactNative应用的入口。
StyleSheet:ReactNative中使用的样式表,类似CSS样式表
各种开发中需要使用的组件 模板中使用的是ES6语法,ES5语法如下:
let React = require("react-native");
let {
AppRegistry,
StyleSheet,
Text,
View
} = React; require函数,搜索目录加载文件
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; /*
第二部分 创建ReactNative组件 模板中使用的是ES6语法,
render() {} 是ES6中的函数简写 ES5语法如下: var Market = React.createClass({
render:function(){
return {};
}
});
*/ export default class Market extends Component { // 继承market这个类
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
} /*
第三部分 StyleSheet.create创建样式实例
在应用中只会被创建一次,不用每次在渲染周期中重新创建
*/
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); /*
第四部分 注册入口组件 AppRegistry:负责注册运行ReactNative应用程序的JavaScript入口
registerComponent注册应用程序的入口组件。告知ReactNative哪一个组件被注册为应用的根容器 第二个参数使用了ES6语法,箭头函数:
() => Market
返回的必须是定义的组件类的名字 等价于
function() {return Market}
*/ AppRegistry.registerComponent('Market', () => Market); // 注册

.

React Native 爬坑之路的更多相关文章

  1. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

  2. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  3. React Native之坑总结(持续更新)

    React Native之坑总结(持续更新) Genymotion安装与启动 之前我用的是蓝叠(BlueStack)模拟器,跑RN程序也遇到了一些问题,都通过搜索引擎解决了,不过没有记录. 但是Blu ...

  4. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  5. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  6. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  7. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  8. React Native 填坑一

    React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justif ...

  9. Tinker爬坑之路

    目的 热修复去年年底出的时候,变成了今年最火的技术之一.依旧记得去年面试的时候统一的MVP,然而今年却变成了RN,热修复.这不得不导致我们需要随时掌握最新的技术.不然可能随时会被淘汰.记得刚进公司,技 ...

随机推荐

  1. [poj_3469]多核CPU

    Sample Input 3 1 1 10 2 10 10 3 2 3 1000 Sample Output 13 最小割,把模块看做点,建源点s和汇点t,以下(a,b,c)表示从a向b连一条容量为c ...

  2. java基础练习 16

    public class Sixtheen { /*利用递归方法求5!.*/ public static void main(String[] args){ System.out.println(&q ...

  3. 简述web工程师的职责与学习

    最近两年web突然很火,也有很多人涌入这一行,但这行实际上是进来的人很多,出去的人也很多. 在我眼里,Web前端开发工程师的职责有:1.Web前端表现层及与前后端交互的架构设计和开发2.配合后台开发人 ...

  4. 第五步:Lucene创建索引

    package cn.lucene; import java.io.IOException; import java.nio.file.Paths; import java.util.Date; im ...

  5. Trapping Rain Water (Bar Height) -- LeetCode

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  6. Android的file文件操作详解

    Android的file文件操作详解 android的文件操作要有权限: 判断SD卡是否插入 Environment.getExternalStorageState().equals( android ...

  7. mailkit----163邮箱登录拉取邮件的坑

    在使用mailkit的ImapClient拉取邮件的时候,如果我们使用的是网易的邮箱(如:163.126等),如果你没有按照网易的设置去打开IMAP协议,那么将无法登录邮箱,并且发送一封使用不安全的客 ...

  8. DOM系统学习-基础

    DOM介绍  DOM介绍: D 网页文档 O 对象,可以调用属性和方法 M 网页文档的树型结构  节点: DOM将树型结构理解为由节点组成.     节点种类: 元素节点.文本节点.属性节点等 查找元 ...

  9. Windows路由表配置:双网卡路由分流

    一.windows 路由表解释 route print - ====================================================================== ...

  10. kubernetes1.5.2--部署监控服务

    本文基于kubernetes 1.5.2版本编写 Heapster是kubernetes集群监控工具.在1.2的时候,kubernetes的监控需要在node节点上运行cAdvisor作为agent收 ...