Even_Cyw
Even_Cyw

React 学习笔记

一. React 概述

React是一个视图层的框架（库）。在传统的方式中，我们通过编写HTML代码来设计网页的结构，通过 JavaScript 以及 getElementById 等 api 来获取某个节点，通过节点的 innerHTML，innerText，appendChild 等属性或者方法（或者你也可能用JQuery）来更新视图。

React 要做的是完成一切所需的视图层更新

​
react1.png

React 中视图是数据的映射，改变数据即可使视图发生变化。

例如一个页面上展示用户的名片，名片上有照片、姓名、年龄、地址等基本信息，如下图所示：

react2.png

用户看到的名片就是视图，而对于React而言，这是由用户的数据映射而来，如：

{
 photo: "my-photo.jpeg",
 name: "sarike",
 age: 18,
 address: "北京"
}

用户想要查看不同的名片，则React会用新的数据替换旧数据，这就是所谓的单向数据流。

总结什么是React

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    • 用来构建UI的 JavaScript库

    • React 不是一个 MVC 框架，仅仅是视图（V）层的库

  • React 官网

  • React 中文文档

1. 面向组件编程

前端开发中，对于HTML而言，它的各种元素（如：div，table，input，select等）就是最基本的组件 ，通过对它们进行组合，成为用户最终看到的视图（如上文所说的名片）。

为什么说React是面向组件编程呢？

因为：**React 提供了一种看似可以创造新 HTML 标签的能力——通过产生新的组件**

继续上面“名片”的例子，React可以创造一个标签（组件），让前端页面中可以按照需求使用这个标签，如：

总结：有了React，则对于一个项目，前期需要观察项目的原型或设计稿，提炼出可拆分可复用的公共组件。

2. React 特点

  1. 声明式设计 −React采用声明范式，可以轻松描述应用。

  2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

  3. 灵活 −React可以与已知的库或框架很好地配合。

  4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3 React 的安装使用

React 可以直接下载使用，官网 http://facebook.github.io/react/ 下载最新版。

也可以直接使用 BootCDN 的 React CDN 库，地址如下：

上面引用了 React 常用的三个库：

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

我们同样可以使用create-react-app来快速构建 React 开发环境（可能会花费较长时间）：

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下 :

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

二. React JSX

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

  • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的，在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。

实例：

// 嵌套多个 HTML 标签，需要使用一个标签元素包裹它， 如 
, 
 等

ReactDOM.render(
    // 使用 
 包裹
    
   // html 元素起
    
React 教程

    
欢迎学习 React

        // 自定义属性 'data-myattribute' 添加了 'data-' 前缀
    
JSX 是一个很不错的 JavaScript 库!

    
  // html 元素终
    ,
    document.getElementById('example')
);

注意：实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

1. JSX 中写 Javascript

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 { } 中。实例如下：

ReactDOM.render(
    

      
{1+1}
  //前端显示计算结果：2
    

    ,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false。

2. JSX 内联样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

3. JSX 的注释

JSX 注释需分两种情况：

  • 在标签内部的注释需要花括号
  • 在标签外的的注释不能使用花括号
ReactDOM.render(
    /*注释 */
    
 Hello world {/*注释*/}
,
    document.getElementById('example')
);

4. JSX 数组

JSX 允许在模板中插入数组，数组会自动展开所有成员，实例如下：

页面效果：


react4.png

5. 区分 HTML 标签和 React 组件

React 即可以渲染 HTML 标签 (strings) 又可以渲染 React 组件 (classes)。

通常要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。 要渲染 React 组件，创建一个大写字母开头的本地变量。 示例：

// 渲染 HTML 标签 
var myDivElement = 
;
ReactDOM.render(myDivElement, document.getElementById('example'));
​
// 渲染 React 组件
var MyComponent = React.createClass({/*...*/});
var myElement = ;
ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

三. React 组件

组件的正确使用会使得我们的应用更容易来管理。

1. 构建 Reac 组件

React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：

  1. 函数式定义的无状态组件

  2. es5原生方式React.createClass定义的组件

  3. es6形式的extends React.Component定义的组件

（1）无状态函数式组件

创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。具体的无状态函数式组件，其官方指出：

 在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下：

function HelloComponent(props, /* context */) {
  return 
Hello {props.name}

}
ReactDOM.render(, mountNode)

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

  1. 组件不会被实例化，整体渲染性能得到提升
    因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
  2. 组件不能访问this对象
    无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
  3. 组件无法访问生命周期的方法
    因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
  4. 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用
    无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

2）React.createClass

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件，其形式如下：

var InputControlES5 = React.createClass({
    propTypes: {
        //定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { 
        //组件默认的props对象
        initialValue: ''
    },
    
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    handleChange: function(event) {
        this.setState({ 
            //this represents react component instance
            text: event.target.value    //返回被点击节点的value
        });
    },
    render: function() {
        return (
            

                Type something:
                
            

        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};

与无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，React.createClass形式自身的问题暴露出来：

  • React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

    • React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components--HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。HOC可以参考无状态组件(Stateless Component) 与高阶组件。

再看一个简单的示例：

// 封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage
var HelloMessage = React.createClass({
  render: function() {
    return 
Hello World！
;
  }
});
 
ReactDOM.render(
  ,
  document.getElementById('example')   //注意：此处无`;`号
);

分析：

  • React.createClass()方法用于生成一个组建类HelloMessage。
  • 示例化组件类输出到视图。

注意：

  • 原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头， HelloMessage 不能写成 helloMessage。
  • 组件类只能包含一个顶层标签（即包裹这个部分的标签 ），否则也会报错。
  • ReactDOM.render()最后一个元素后没有分号;。
var HelloMessage = React.createClass({
  render: function() {
    return （
    

      Hello {this.props.name}
    

    

      some text
    
）;
  }
});
// 错误: 既有
又有
，两个顶层标签

（3）React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class InputControlES6 extends React.Component { //继承 extends
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            

                Type something:
                
            

        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: ''
};

（4）React.createClass与React.Component区别

根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。

a. 函数this自绑定

React.createClass创建的组件，其每一个成员函数的this都由React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置。

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      

    );
  }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      

    );
  }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

    constructor(props) {
       super(props);
       this.handleClick = this.handleClick.bind(this); //构造函数中绑定
  }

    
 //使用bind来绑定

    
this.handleClick()}>
 //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

//ES5 通过实例化 propTypes 属性和 getDefaultProps 方法获取
const TodoItem = React.createClass({
    propTypes: { // as an object
        name: React.PropTypes.string
    },
    getDefaultProps(){   // return a object
        return {
            name: ''    
        }
    }
    render(){
        return 

    }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

// ES6 propTypes 和 defaultProps 成为了组件的 Static 静态属性
class TodoItem extends React.Component {
    static propTypes = {//类的静态属性
        name: React.PropTypes.string
    };

    static defaultProps = {//类的静态属性
        name: ''
    };

    ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；
React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

// ES5 通过getInitialState声明
const TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return 

    }
})

// ES6 constructor中this.state{}内声明
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return 

    }
}

Mixins的支持不同
Mixins（混入）是面向对象编程OOP（Object Oriented Programming）的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。具体可以参考React Mixin的前世今生。
React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = {  
  doSomething() {

  }
};
const Contacts = React.createClass({  
  mixins: [SomeMixin],
  handleClick() {
    this.doSomething(); // use mixin
  },
  render() {
    return (
      

    );
  }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components，具体细节可以参考这篇文章

2. 组件参数传递

若需要向组件传递参数，可以使用this.props对象,实例如下：

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

分析：

以上实例中 name属性通过this.props.name 来获取。

3. 复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

var WebSite = React.createClass({
  render: function() {
    return (
      

        
        
      

    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      
{this.props.name}

    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      
        {this.props.site}
      
    );
  }
});
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

分析：

四. React State

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 请看实例：

var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: this.props.liked};
    },
    handleClick: function(event) {
        this.setState({liked: this.state.liked=='y'?'n':'y'});
    },
    render: function() {
        var text = this.state.liked=='y' ? '喜欢' : '不喜欢';
        return (
            

            你{text}我。点我切换状态。
            

        );
    }
});

ReactDOM.render(
    ,
    document.getElementById('example')
);

分析

  • 创建了自定义组件LikeButton；
  • LikeButton中包含了三个方法：
    • getInitialState：获取this.state.liked默认值；
    • handleClick：对onClick事件监听；
    • render：渲染内容。
  • this.setState()修改this.state.liked状态值，每次修改以后，会自动调用this.render 方法 ，重新渲染。
  • React.createClass()中的方法会依次调用，最后执行render()。

五. React Props

state 和 props主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。

因此组件设计时，需要定义 state 来更新和修改数据，而子组件只能通过 props 来传递数据。

1. 默认 Props

通过getDefaultProps()方法为props设置默认值，实例如下：

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      /*默认的name='Runoob'*/
      name: 'Runoob'  
    };
  },
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

2. State 和 Props 组合使用

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },
 
  render: function() {
    return (
      

        
        
      

    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      
{this.props.name}

    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      
        {this.props.site}
      
    );
  }
});
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

3. Props 验证

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle组件，属性title 是不能为空的且必须是字符串类型，非字符串类型会自动转换为字符串 ：

var title = "React 教程";
// var title = 123;
var MyTitle = React.createClass({
  // 通过 propTypes 对 props.parmas 进行验证
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
 
  render: function() {
     return 
 {this.props.title} 
;
   }
});
ReactDOM.render(
    ,
    document.getElementById('example')
);

分析：

  • propTypes里规定propsName对应的数据要求；
  • .string要求必须强制转换成String类型，.isRequired规定不能为空；

React.PropTypes后加入的是Props验证器，更多验证器的说明如下：

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
      
    // 自定义验证器2
    name: (props, propName) => {  // 自定义验证
    console.log(props, propName);
    if (typeof props[propName] !== 'string') {
      return new Error('必须传递一个字符串');
    } else if (props[propName].length >= 5) {
      return new Error('字符串长度必须小于5')
    } else {
      return null;
    }
  }
      
  },
  /* ... */
});

六. React 组件 API

将讲解以下7个方法:

  • 设置状态：setState
  • 替换状态：replaceState
  • 设置属性：setProps
  • 替换属性：replaceProps
  • 强制更新：forceUpdate
  • 获取DOM节点：findDOMNode
  • 判断组件挂载状态：isMounted

1. setState 设置状态

setState(object nextState[, function callback])

参数说明

  • nextState，将要设置的新状态，该状态会和当前的state合并
  • callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

setState 的注意事项

  • 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
  • setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
  • setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

实例

// 通过点击 h2 标签来使得点击计数器加 1。
var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (
        

            点我！点击次数为: {this.state.clickCount}
        

    );
  }
});
ReactDOM.render(
  ,
  document.getElementById('message')
);

2. replaceState 替换状态

setProps(object nextProps[, function callback])

参数说明

  • nextState，将要设置的新状态，该状态会替换当前的state。
  • callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

区别 setState 和 replaceState

  • setState，将要设置的新状态，该状态会和当前的state合并。
  • repalceState，将要设置的新状态，该状态会替换当前的state。

请看实例：

var HelloMessage = React.createClass({
    getInitialState: function() {
        return { 
            isRed : true,
            count:0
         };
    },
    // 设置了两个button，一个调用setState() 另一个调用replaceState()
    handleClick1: function(){
        this.setState({isRed : !this.state.isRed},function(){
            console.log("setState:");
            console.log(this.state);
            // Object{isRead: false, count: 0} 所有state合并输出
        });
    },
    
    handleClick2: function(){
        this.replaceState({count : this.state.count+1},function(){
            console.log("replaceState:");
            console.log(this.state);
            // Object{count: 1} 仅replace的state被返回了
        });
    },
    
    render: function() {
        var redStyle = {
            color:'red'
        };
        var blueStyle = {
            color:'blue'
        };
        return (
            

                

                    Hello {this.props.name}！
                

                
                
            

        );
    }
});

ReactDOM.render(
    ,
    document.getElementById("example")
);

运行结果：


react5.png

通过运行结果我们可以知道，点击第一个button时，调用 setState() ，会将新状态合并到当前状态，因此，状态 isRed 更新到最新状态，而状态 count 没有改变，保持原有状态。

当点击第二个button时，调用 replaceState()，替换当前的状态，由于replaceState()中只设置状态 count ， 因此state中只有count一个状态，由于isRed状态不存在，this.state.isRed ? redStyle : blueStyle中 this.state.isRed为false，这样显示的样式为 blueStyle。

3. setProps 设置属性

setProps(object nextProps[, function callback])

参数说明

  • nextProps，将要设置的新属性，该状态会和当前的props合并
  • callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

功能

设置组件属性，并重新渲染组件。

props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。

更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

4. replaceProps 替换属性

replaceProps(object nextProps[, function callback])

参数说明

  • nextProps，将要设置的新属性，该属性会替换当前的props。
  • callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

replaceProps()方法与setProps类似，但它会删除原有 props。

5. forceUpdate 强制更新

forceUpdate([function callback])

参数说明

  • callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

6. findDOMNode 获取DOM节点

DOMElement findDOMNode()

参数说明

  • 返回值：DOM元素DOMElement

如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

7. isMounted 判断组件挂载状态

bool isMounted()

参数说明

  • 返回值：true或false，表示组件是否已挂载到DOM中

isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

8. 附加：DOM 节点

在 HTML DOM 中，根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

七. React 组件生命周期

1. 组件声明周期状态

组件的生命周期可分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

2. 生命周期方法

生命周期的方法有：

  • componentWillMount 在渲染前调用,在客户端也在服务端。
  • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    可以在你确认不需要更新组件时使用。
  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

以下实例在 Hello 组件加载以后，通过componentDidMount方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
 
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 
  render: function () {
    return (
      

        Hello {this.props.name}
      

    );
  }
});
 
ReactDOM.render(
  ,
  document.body
);

八. React AJAX

  • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

React 组件的数据可以通过 componentDidMount方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState方法重新渲染 UI。

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

以下实例演示了获取 Github 用户最新 gist 共享描述：

// 使用 jQuery 完成 Ajax 请求
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },
 
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },
 
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
 
  render: function() {
    return (
      

        {this.state.username} 用户最新的 Gist 共享地址：
        {this.state.lastGistUrl}
      

    );
  }
});
 
ReactDOM.render(
  ,
  mountNode
);

完结。单纯是整理了一下，希望多多实际练习才能发现更多。当然现在react-native更新迭代太快，可能有些方法不能用或者有改变，希望指正。

你可能感兴趣的:(React 学习笔记)

  • VUE实现大小缩放轮播图 书边事. vue.js前端javascript
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 网络工程师学习笔记（一） 专业白嫖怪 网络工程师学习笔记学习笔记网络
    为了备战下半年的软考——网络工程师，利用每天的下班的闲暇时间看书听课，然后自己手敲整理的系列资料。希望能够对你们有所帮助第一章__计算机网络概述计算机网络的定义：将分散的具有独立运算功能的计算机系统，通过通信线路和通信设备进行连接起来的实现资源的共享。ARPAnet网络的特征：资源共享、分散控制、分组交换1946年第一台通用计算机—埃尼亚克能够相互连通进行数据交换。1960年提出巨型网络，出现了对
  • Taro实现微信小程序自定义拍照截图识别 书边事. taro微信小程序小程序
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
  • K8S学习笔记02——K8S组件 沉淅尘 #Docker#K8Skubernetes
    Kubernetes组件一、控制平面组件（ControlPlaneComponents）(1)kube-apiserver(2)etcd(3)kube-scheduler(4)kube-controller-manager(5)cloud-controller-manager二、Node组件1.kubelet2.kube-proxy3.容器运行时（ContainerRuntime）三、插件（Add
  • （小白入门）Windows环境下搭建React Native Android开发环境 码农老黑 前端ReactNative移动开发Androidstudio
    ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc
  • 「Python」2020.04.08学习笔记 | 第六章文件（a+）模式+把随机手机号写入文件小练习 Yetta的书影屋
    学习测试开发的Day97，真棒！学习时间为40M第九次全天课(下午视频二20M-50M）>>>fp.seek(0)0>>>fp.read()'你好11你好12你好13你好14你好15\n你好16\n你好17\n你好18\n'>>>fp.seek(0,0)0>>>fp.write("*********************************\n")34>>>fp.seek(0,0)0>>>f
  • 《金文成〈中庸〉学习笔记401。2020-2-24》 金吾生
    《金文成〈中庸〉学习笔记401。2020-2-24》今天是庚子年戊寅月丁酉日，二月初二，2020年2月24日星期一。二月二龙抬头。第二十二章【唯天下至诚，为能尽其性；能尽其性，则能尽人之性；能尽人之性，则能尽物之性；能尽物之性，则能赞天地之化育；能赞天地之化育，则可以与天地参矣。】上一节，船山讲解说，性作为天用之本体，于圣人和匹夫匹妇而言并无二致，区别来自于诚。诚的区别来自于纯粹与掺杂。掺杂什么呢
  • CDGA学习笔记三-《数据安全》 zy_chris 网络安全
    七、数据安全7.1引言数据安全包括安全策略和过程的规划、建立与执行，为数据和信息资产提供正确的身份验证、授权、访问和审计。要求来自以下方面：（1）利益相关方（2）政府法规（3）特定业务关注点（4）合法访问需求（5）合同义务7.1.1业务驱动因素1、降低风险信息安全首先对组织数据进行分级分类，对组织数据进行分类分级的整个流程：1）识别敏感数据资产并分类分级2）在企业中查找敏感数据3）确定保护每项资产
  • react中如何获取并使用usestate声明的变量的值 小华0000 react.jsjavascript前端
    1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现 ZhaiMou vue.jsjavascript前端数据结构前端框架开发语言
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
  • React 前端应用结合 Nginx 部署指南及常见错误排查 蜗牛去旅行吧 前端react.jsnginx
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
  • vue3 响应性API weixin_44747590 vue3vuejs
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
  • 手撸vue3核心源码——响应式原理(isRef和unRef) 前端不是渣男 前端vue.js
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
  • vue3 | isRef、unref、toRef、toRefs 杨贵妃会飞飞飞 Vuevue.js前端
    isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • React项目的开发前准备 以及 JSX 的基本使用 渡鸦七 Reactreact.js前端前端框架
    React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React
  • react 函数组件useState异步变同步 MIKE-zi react入门setstate异步问题函数组件实现分页函数组件上拉加载
    需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page
  • 遇到僵尸进程，怎么处理---学习笔记 summer@彤妈 性能优化linux
    僵尸进程解释当iowait升高时，进程很可能因为得不到硬件的响应，而长时间处于不可中断状态。从ps或者top命令的输出中，你可以发现它们都处于D状态，也就是不可中断状态（UninterruptibleSleep）。既然说到了进程的状态，进程有哪些状态你还记得吗？我们先来回顾一下。top和ps是最常用的查看进程状态的工具，我们就从top的输出开始。下面是一个top命令输出的示例，S列（也就是Stat
  • C++学习笔记----6、内存管理（五）---- 智能指针（3） 王俊山IT c++学习笔记开发语言
    2、shared_ptr有时候吧，有些对象或者一部分代码需要同一个指针的拷贝。那么unique_ptr不能被拷贝，因此就不能用于些场景。这样的话，std::shared_ptr就是一个支持能够被拷贝的拥有共享属主的智能指针。但是，如果有指向同一个资源的多个shared_ptr实例，那么怎么知道什么时候去释放资源呢？这可以通过对于引用记数来解决，这个我们以后再聊。首先，让我们看一下怎么构造与使用sh
  • 【学习笔记】武志红心理学—潜意识决定命运 万万千千
    冰山一角什么构成了我们的命运？命运是由我们的显意识和潜意识来决定的。我们可以用一张图做一个比喻。看过“冰山一角”图片的都知道，潜意识就是水面以下的部分，显意识是水面以上的部分，从体积来看，潜意识占了大部分，而显意识只是冰山一角，纵向来看，庞大的潜意识支撑着冰山一角的显意识，才得以让冰山漂浮在水面。延伸到我们的人生，我们对自己显意识层面的想法很容易感知到，所以我们会说这是“我”自己做的选择。而潜意识
  • Prism 教程 yang_B621 PrismIOC
    http://t.csdnimg.cn/VXSSvhttps://blog.csdn.net/u010476739/article/details/119341731Prism-随笔分类-Hello——寻梦者！-博客园(cnblogs.com)C#IoC学习笔记-缥缈的尘埃-博客园(cnblogs.com)WPF_SchuylerEX的博客-CSDN博客
  • 绘本讲师训练营【第30期】2/21阅读原创《绘本之力》学习笔记2 郑贤钰
    30028郑贤钰今天读了绘本之力《留在灵魂里的东西》读了心里有非常大的感触！两个年幼什么都不懂的孩子，为了自己心爱的东西，攒下来自己的零花钱，却买了一个自己不知道怎么用的东西，当他们觉得这个东西根本就不好，准备扔掉的时候，这是故事中的有趣有爱的老爷爷出现了，帮助孩子们再一次发现之前别人拉出优美的音乐，原来自己买的这一个琴，自认为没用的琴也能够经过老爷爷熟练的演奏也能拉出这样优美的声音，这让孩子们十
  • 仿老师悟 耕海者
    毕业十年了，今天去拜访老师，看到老师的学习笔记，看到老师努力学习，积极提高的状态，我觉着自己真是有些懈怠了，孩子们，老师的老师都在孜孜不倦，我们岂能偷懒！
  • C++学习笔记----7、使用类与对象获得高性能（一）---- 书写类（2） 王俊山IT c++学习笔记开发语言
    2.2、定义成员函数前面对SpreadsheetCell类的定义足以让你生成类的对象。然而，如果想调用setValue()或者getValue()成员函数，连接器就会抱怨这些函数没有定义。这是因为到目前为止，这些成员函数只有原型，而还没有实现。通常，类的定义会在模块接口文件。对于成员函数的定义，你有一个选择：可以在模块定义文件或者在模块实现文件。下面是SpreadsheetCell类，在类内对成员
  • Netty权威指南：Netty总结-高性能与可靠性 Ty_1106 Nettyjava网络rpc
    第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor
  • Vue 和 React 的对比 淘淘是只狗 vueReactvue.jsreact.jsjavascript
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
  • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！ tabzzz react.jsjavascriptecmascript
    文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
  • react 更新元素状态 叶绿素yls
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
  • Spring6学习笔记4：事务 ·云扬· SSMJava#Spring学习笔记spring
    1JdbcTemplate1.1简介Spring框架对JDBC进行封装，使用JdbcTemplate方便实现对数据库操作准备工作①搭建子模块搭建子模块：spring-jdbc-tx②加入依赖org.springframeworkspring-jdbc6.0.2mysqlmysql-connector-java8.0.30com.alibabadruid1.2.15③创建jdbc.propertie
  • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
    log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
  • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                 elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
  • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
    时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
  • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
  • 持续集成工具 g21121 持续集成
            持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
  • 数据结构哈希表(hash)总结 永夜-极光 数据结构
    1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
  • 乱七八糟 程序员是怎么炼成的
    eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
  • 职场人伤害了“上司” 怎样弥补 aijuans 职场
    由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
  • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
    出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
  • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
      下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
  • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
  • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
    /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
  • 【Resin一】Resin服务器部署web应用 bit1129 resin
    工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
  • red5简介及基础知识 白糖_ 基础
      简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
  • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
    angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
  • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
    public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
  • web实时通讯 Chen.H Web浏览器socket脚本
    关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
  • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
          大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
  • oracle 外部表 daizj oracle外部表external tables
        oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
  • aop相关的概念及配置 daysinsun AOP
    切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
  • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
    middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
  • Linux日志分析常用命令 dcj3sjt126com linuxlog
    1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
  • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
  • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
    使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
  • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
    发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
  • UI设计中我们为什么需要设计动效 lampcy UIUI设计
    关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
  • 如何禁止页面缓存 nannan408 htmljspcache
    禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
  • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
          【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
  • EXT实例 tntxia ext
      （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
  • 数学学习在计算机研究领域的作用和重要性 xjnine Math
    最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他