Articles in the Web category

  1. React使用笔记(4)-React状态和属性详解

    1. 属性的含义和用法

    1.1 属性赋值

    <HelloWorld name="?"><HelloWorld>中属性的值可以有以下几种形式:

    • "Tom" 字符串
    • {123} 字符
    • {"Tom"} 等同于第一种方法
    • {[1, 2, 3]} 数组,属性接收的也是数组,这样就能做一些类似checkbox的事情了
    • {variable or function} 对象或者函数

    还有一种写法,叫做展开语法,用3个点加对象名来实现:

    var props = {
        one: "123",
        two: 321
    };
    <Hello {...props}/>
    

    还有一种不常用的方法setProps:

    var instance = React.render(<HelloWorld></HelloWorld>, document.body);
    instance ...
    Tagged as : JavaScript React
  2. React使用笔记(3)-React Event Listener

    1. 构造基本结构

    首先,我们先创建一个按钮,一个输入框。我们准备点击按钮时,后面有一个<span>显示和隐藏。代码如下:

    <div id="container"></div>
    <script type="text/jsx">
        var TestClickComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <button>显示|隐藏</button>
                        <span>测试点击</span>
                    </div>
                    );
            }
        });
    
        var TestInputComponent = React.createClass({
            getInitialState: function(){
                return {
                    inputContent: ''
                }
            },
            render: function(){
                return (
                    <div>
                        <input type="text" /><span ...
    Tagged as : JavaScript React
  3. React使用笔记(2)-React Components的生命周期

    1. React Components的生命周期

    React Components的3种状态:

    • Mounted:React Component被render解析,生成对应的DOM节点,并被插入浏览器的DOM结构的过程。这个过程结束了就是这个组件被Mounted了。
    • Update:一个被mounted的React Component被重新render的过程。
    • Unmounted:一个被mounted的React Component对应的DOM节点被从DOM结构中移除的这样一个过程。

    每一个状态React都封装了对应的hook函数。


    2. React Components生命周期中的hook函数

    2.1 实验,来添加mount的hook函数

    • getDefaultProps:只调用一次,只有在组件的第一个实例被初始化时才被调用,用于实例之间共享引用,它返回的是引用,而不是值。在var Hello = React.createClass({...})执行时,getDefaultProps就会被调用。
    • getInitialState:初始华每个实例特有的状态
    • componentWillMount:它是渲染之前最后一次修改状态的机会。
    • render:只能访问this ...
    Tagged as : JavaScript React
  4. React使用笔记-React的JSX和Style

    1. 文件基本结构

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
        <!--react.js-->
        <script src="js/react.js"></script>
        <!--解析JSX-->
        <script src="js/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="container"></div>
    
        <!--JSX的声明需要是type="text/jsx"-->
        <script type="text/jsx">
        var ...
    Tagged as : JavaScript React
  5. JavaScript模块化

    1. 模块化解读

    AMD是RequireJS在推广过程中对模块定义的规范化产出。

    • 异步加载模块,依赖前置,提前执行
    • Define定义模块 define(['require', 'foo'], function(){return;});
    • Require加载模块(依赖前置)require(['foo', 'bar'], function(foo, bar){});

    CMD是SeaJS在推广过程中对模块定义的规范化产出。

    • Define定义exports导出define(function(require, exports, module){}); module上存储了当前模块的一些对象。
    • require(./a)直接引。Require.async异步引入.
    • 同步加载,依赖就近,延迟执行。

    类似的还有CommonJS Module/2.0规范。

    2. SeaJS的应用

    目录结构:

    examples/
      |-- sea-modules      存放 seajs、jquery 等文件 ...
    Tagged as : JavaScript
  6. React使用笔记(7)-React调优

    首先使用react-with-addons.js代替react.js

    在浏览器控制台使用React.addons.Perf.start()来记录操作用时,然后用React.addons.Perf.stop()

    查看结果:React.addons.Perf.printInclusive().

    <script type="text/jsx">
        var NumberDiv = React.createClass({
            getInitialState: function () {
                return {
                    number: this.props.number,
                }
            },
            shouldComponentUpdate: function (nextProps) {
                return nextProps.render
            },
            render: function () {
                var style = {
                    height: "100px",
                    width ...
    Tagged as : JavaScript React
  7. React使用笔记(6)-React动画

    1. CSS3动画

    <head>
        <meta charset="UTF-8">
        <title>React动画</title>
        <style>
        .example-enter {
          opacity: 0.01;
          transition: opacity .5s ease-in;
        }
    
        .example-enter.example-enter-active {
          opacity: 1;
        }
    
        .example-leave {
          opacity: 1;
          transition: opacity .5s ease-in;
        }
    
        .example-leave.example-leave-active {
          opacity: 0.01;
        }
        </style>
    </head>
    <body>
        <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
        <script ...
    Tagged as : JavaScript React
  8. React使用笔记(5)-React组件的协同使用

    1. 组件协同使用介绍

    组件的协同就是对组件的一种组件、管理的方式

    目的:

    • 逻辑清晰
    • 代码模块化
    • 封装细节
    • 代码可复用

    组织方式:

    • 组件嵌套:实现封装
    • Mixin:直接嵌入代码,实现复用

    2. 组件嵌套

    组件嵌套的本质是父子关系

    父组件和子组件是如何通信的呢? 父组件给子组件通信是用属性。 子组件对父组件通信是:父组件把事件处理函数作为属性传递给子组件,子组件再进行调用。

    <script type="text/jsx">
        var Radio = React.createClass({ 
            getInitialState: function () {
                return {
                    value: this.props.defaultValue
                }; 
            },
            handleChange: function (event) { 
                if (this.props.onChange) {
                    this.props.onChange ...
    Tagged as : JavaScript React

Page 1 / 5