JavaScript库 — — React

React不支持IE6、IE7

React是什么？
用于构建用户界面的JAVASCRIPT库，是MVC中的V（视图）。

React特点：
1. 声明式设计
2. 减少与DOM的交互，高效
3. JSX - JSX是JavaScript语法的扩展。React 开发不一定使用JSX，但建议使用它
4. 构建组件，方便应用在大项目中
5. 单向响应的数据流

一个实例：

//把Hello, world输入到#example中
ReactDOM.render(
    <h1>Hello, world</h1>,
    document.getElementById('example')
);

 

React的安装：
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

通过 npm 使用 React
参考：http://www.runoob.com/react/react-install.html

webstorm不支持babel的解决办法：
把引入的script库browser换成JSXTransformer，然后把type类型改为：text/jsx ，最后再把JavaScript版本修改为JSX Harmony就ok了。

JSX 就是 JavaScript

 

React 组件

 

React State 状态

getInitialState: 定义初始状态
handleClick: 程序自定义方法
render:
this.setState 修改状态值
this.state 当前状态值

React props （小道具）
state 可改变，容器组件里用的比较多
props 是不可变的
props：在容器里提取属性，比如：this.props.name 提取name的属性值

getDefaultProps() 设置默认 props 值

 

props 验证（不管用）
propTypes
React.PropTypes

React 组件 API
setState 设置状态 this.setState(fn/key: value) 最重要
replaceState 替换状态
setProps 设置属性
replaceProps 替换属性
forceUpdate 强制更新 尽量避免使用
getDOMNode 获取DOM节点
isMounted 判断组件挂载状态

组件API查询网址：
http://itbilu.com/javascript/react/EkACBdqKe.html

React 组件的生命周期
三个状态：
1. Mounting 已插入真实DOM
2. Updating 正在被重新渲染
3. Unmounting 已移出真实DOM

生命周期方法：
componentWillMount 渲染前调用
componentDidMount 第一次渲染调用，只在客户端，可以通过 this.getDOMNode() 进行访问，
如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

......

 

官方文档：
http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

React Ajax

React 表单与事件

this.refs 获取组件的引用

 

代码1：

var i = 1;

// react 自动添加单位px
var myStyle = {
    fontSize: 20,
    color: 'orange'
};

var arr = [
    <h1>数组元素1</h1>,
    <h2>数组元素2</h2>
];

// react 组件
var MyReactComponent = React.createClass({
    render: function () {
        return <h1>我是react组件，属性name的值：{this.props.name}</h1>;
    }
}); // MyReactComponent 是组件名，组件名要求大写开头，否则会报错

ReactDOM.render(
    <div>
        <h1>使用表达式</h1>
        <h2>{1 + 1}</h2>
        <p>{i = 1 ? 'true' : 'false'}</p>
        <p data-myattribute="some_value">这是一个不错的JavaScript库</p>
        <p style = {myStyle}>样式</p>
        {/* 注释 */}
        {/* JSX支持在模板中添加数组，数组会自动展开 */}
        <div>{arr}</div>
        {/* react 组件，直接在标签里引入组件名，组件类只能包含一个顶层标签，否则也会报错 */}
        <MyReactComponent name='lqc_react' />
    </div>,
    document.getElementById('example')
);

 

代码2：

/**
 * 编写一个符合组件
 * 要求：1.有大标题
 * 2.有链接，链接点击进入百度首页
 */

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

var Link = React.createClass({
    render: function () {
        return <a target='_blank' href={this.props.link}>{this.props.link}</a>
    }
});

var WebSite = React.createClass({
    render: function () {
        return (<div>
                    <Name name={this.props.name} />
                    <Link link={this.props.link} />
                </div>);
    }
});

ReactDOM.render(
    <WebSite name='百度' link='http://www.baidu.com' />,
    document.getElementById('example')
);

 

代码3：

// 自定义 react 功能组件
var Liked = React.createClass({
    // 设置默认状态，getInitialState() 是系统规定函数
    getInitialState: function () {
        return {liked: false};
    },
    // 自定义函数
    handleClick: function () {
        this.setState({liked: !this.state.liked});
    },
    render: function () {
        var text = this.state.liked ? '喜欢' : '不喜欢';

        return (<p onClick = {this.handleClick}>
            <b>{text}</b>
            点击喜欢或不喜欢切换状态
        </p>);
    }
});

// 渲染到 HTML DOM
ReactDOM.render(
    <Liked />,
    document.getElementById('example')
);

 

代码4：

props：
// 使用 props
// 编写组件
var HelloProps = React.createClass({
    // getDefaultProps() 设置默认 props 值
    getDefaultProps: function () {
        return {
            name: 'default'
        }
    },
    render: function () {
        return (<p>名字为：{this.props.name}</p>);
    }
});

/**
 * 渲染到 HTML DOM
 */
ReactDOM.render(
    <HelloProps name = 'realityName' />,
    document.getElementById('example')
);

 

代码区：

/****************************************/
/**
 * 利用 state 和 props 建立一个 web 站点
 */
var WebSite = React.createClass({
    getInitialState: function () {
        return {
            name: '百度',
            site: 'http://www.baidu.com'
        };
    },
    render: function () {
        return (<div>
                    <Name name = {this.state.name} />
                    <Site site = {this.state.site} />
                </div>);
    }
});

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

var Site = React.createClass({
    render: function () {
        return (<a href = {this.props.site}>{this.props.site}</a>);
    }
});


ReactDOM.render(
    <WebSite />,
    document.getElementById('example')
);

/**************************************************/

/**
 * props 验证
 * @type {string}
 */
var title = '标题';
var title = 123;

var MyComponent = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired
    },
    render: function () {
        return (<div>{this.props.title}</div>);
    }
});

ReactDOM.render(
    <MyComponent title = {title} />,
    document.getElementById('example')
);


/*****************************************************/

// 设置点击次数
var Counter = React.createClass({
    getInitialState: function () {
        return {
            count :0
        }
    },
    handleClick: function () {
        // 传入当前状态 state
        this.setState(function (state) {
            // 以键值对的方式重新赋值
            return {count: state.count + 1};
        });
    },
    render: function () {
        // 属性的方式调用函数不需要加括号
        return (<div>
                    <p onClick = {this.handleClick}>点击我</p>
                    <p>
                        您点击的次数为：{this.state.count}
                    </p>
                </div>);
    }
});

ReactDOM.render(
    <Counter />,
    document.getElementById('example')
);

/*************************************************/

/**
 * React Ajax 获取 GitHub 用户最新 gist 共享描述
 */


var Gist = React.createClass({
    getInitialState: function () {
        return {
            username: '',
            lastGistUrl: ''
        }
    },
    // 获取数据
    componentDidMount: function () {
        this.serverRequset = $.get(this.props.site, function (result) {
            var getGist = result[0];
            console.log(getGist);
            this.setState({
                username: getGist.id,
                lastGistUrl: getGist.url
            });
            console.log(this);
        }.bind(this));
    },
    //取消未完成的请求
    componentWillUnmount: function () {
        this.serverRequset.abort();
    },
    render: function () {
        return (<div>
                    <p>用户名：{this.state.username}</p>
                    <p>密码：{this.state.lastGistUrl}</p>
                </div>);
    }
});

ReactDOM.render(
    <Gist site = 'https://api.github.com/users/octocat/gists' />,
    document.getElementById('example')
);

/************************************************************/

/**
 * 输入框更新 state
 */

var Message = React.createClass({
    getInitialState: function () {
        return {
            value: 'hello message'
        };
    },
    handleChange: function (event) {
        this.setState({
            value: event.target.value
        });
    },
    render: function () {
        return (
            <div>
                <input type='text' onChange={this.handleChange} value={this.state.value} />
                <p>{this.state.value}</p>
            </div>
        );
    }
});

ReactDOM.render(
    <Message />,
    document.getElementById('example')
);


/***********************************************************************/
/**
 * 子组件上使用表单
 */
var Content = React.createClass({
    render: function () {
        return (<div>
                    <input type = "text" value = {this.props.myData} onChange = {this.props.updateValue} />
                    <h4>{this.props.myTips}</h4>
                </div>);
    }
});

var FormChange = React.createClass({
    getInitialState: function () {
        return {
            value: 'hello message'
        }
    },
    handleChange: function (event) {
        this.setState({
            value: event.target.value
        });
    },
    render: function () {
        return (<Content updateValue = {this.handleChange} myData = {this.state.value} myTips = {this.state.value} />);
    }
});

ReactDOM.render(
    <FormChange />,
    document.getElementById('example')
);

/*******************************************************************/

/**
 * 点我改变文字内容
 */
var Content = React.createClass({
    render: function () {
        return (<div>
                    <button onClick = {this.props.changeData}>点我改变文字内容</button>
                    <b>{this.props.myData}</b>
                </div>);
    }
});

var ChangeText = React.createClass({
    getInitialState: function () {
        return {
            value: '默认值'
        };
    },
    handleClick: function (event) {
        this.setState({value : '百度'});
    },
    render: function () {
        return (<Content myData = {this.state.value} changeData = {this.handleClick} />);
    }
});

ReactDOM.render(
    <ChangeText />,
    document.getElementById('example')
);

/*****************************************************/

/**
 * 点击按钮触发输入框获得焦点
 * this.refs 获取组件的引用
 * 使用 this 来获取当前的 react 组件
 */

var MyComponent = React.createClass({
    handleClick: function () {
        this.refs.myInput.focus();
    },
    render: function () {
        return (
            <div>
                <button onClick = {this.handleClick}>点击我，输入框获得焦点</button>
                <input type = "text"
                       ref = "myInput"
                />
            </div>
        );
    }
});

ReactDOM.render(
    <MyComponent />,
    document.getElementById('example')
);