[React]1:基本语法练习

小鱼儿 2022-09-27 04:49 220阅读 0赞

原文地址：http://www.ruanyifeng.com/blog/2015/03/react.html

/**
     * Created by liyanq on 17/2/28.
     */
    
    import React from 'react'
    var ReactROM = require("react-dom");
    ReactROM.render(<h1>Hello World</h1>, window.document.getElementById("example"));
    
    var arr = [<span style={
       {color: "red"}}>one</span>, "two", "three"];//这也行～～～
    ReactROM.render(
        <div>
            {arr.map(function (name) {
                return <div key={name}>hello,{name}</div>
            })}
        </div>, window.document.getElementById("arr")
    );
    
    /**
     * 组件类的第一个字母必须大写，否则会报错。
     * 组件类只能包含一个顶层标签，否则也会报错。
     * */
    var HelloC1 = React.createClass({
        render: function () {
            return <h3>我是HelloC1类，内容:{this.props.name}</h3>
        }
    });
    
    ReactROM.render(<HelloC1 name="HelloC1值"/>, window.document.getElementById("c1"));
    
    /**
     * this.props.children 的值有三种可能：
     * 如果当前组件没有子节点，它就是 undefined ;
     * 如果有一个子节点，数据类型是 object ；
     * 如果有多个子节点，数据类型就是 array
     * */
    var HelloC2 = React.createClass({
        render: function () {
            return (
                <ul>
                    {React.Children.map(this.props.children, function (item) {
                        return <li>{item}</li>
                    })}
                </ul>
            )
        }
    });
    
    ReactROM.render(
        <HelloC2>
            <span>HelloC2值1</span>
            <span>HelloC2值2</span>
        </HelloC2>, window.document.getElementById("c2"));
    
    /**
     * 组件的属性可以接受任意值，字符串、对象、函数等等都可以。
     * */
    var HelloC3 = React.createClass({
        getDefaultProps: function () {
            return {
                defTitle: "MrLi"
            }
        },
        propTypes: {
            title: React.PropTypes.string.isRequired
        },
        render: function () {
            return <h3>HelloC3:{this.props.title};默认属性:{this.props.defTitle}</h3>
        }
    });
    
    var d = 123;//EM环境可以使用toString()转换～
    ReactROM.render(<HelloC3 title={d.toString()}/>, window.document.getElementById("c3"));
    
    /**
     * 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。
     * 只有当它插入文档以后，才会变成真实的 DOM 。
     * 根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，
     * 这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
     * 但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
     */
    
    var HelloC4 = React.createClass({
        handleClick: function (event) {
            this.refs["myTextInput"].focus();
            console.log(event);
            alert(this.refs["myTextInput"].value);
            event.stopPropagation();
            event.preventDefault();
        },
        render: function () {
            return (
                <div>
                    <input type="text" ref="myTextInput"/>
                    <button onClick={this.handleClick}>点击弹窗</button>
                </div>)
        }
    });
    
    ReactROM.render(<HelloC4/>, window.document.getElementById("c4"));
    
    /**
     * React 的一大创新，就是将组件看成是一个状态机，
     * 一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI.
     * this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件.
     * this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
     * */
    var HelloC5 = React.createClass({
        handleClick: function (event) {
            this.setState({liked: !this.state.liked})
        },
        getInitialState: function () {
            return {liked: false};
        },
        render: function () {
            var text = this.state.liked ? "liked" : "have\'t liked";
            return (
                <div onClick={this.handleClick}>
                    You{text} this.click to toggle;
                </div>
            );
        }
    });
    
    ReactROM.render(<HelloC5/>, window.document.getElementById("c5"));
    
    /**
     * 文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数.
     * 通过 event.target.value 读取用户输入的值。
     * textarea 元素、select元素、radio元素都属于这种情况
     * */
    var HelloC6 = React.createClass({
        handleChange: function (event) {
            this.setState({inputValue: event.target.value})
        },
        getInitialState: function () {
            return {inputValue: "hello"}
        },
        render: function () {
            return (
                <div>
                    <input type="text" value={this.state.inputValue} onChange={this.handleChange}/>
                    <h3>{this.state.inputValue}</h3>
                </div>
            )
        }
    });
    
    ReactROM.render(<HelloC6/>, window.document.getElementById("c6"));
    
    /**
     * Mounting：已插入真实 DOM
     * Updating：正在被重新渲染
     * Unmounting：已移出真实 DOM
     * React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
     * */
    var HelloC7 = React.createClass({
        componentWillMount: function () {
            console.log("componentWillMount");
        },
        componentDidMount: function () {
            console.log("componentDidMount");
            this.time = setInterval(function () {
                var opacity = this.state.opacity;
                var count = this.state.count;
                opacity -= 0.2;
                if (opacity < 0.1) {
                    count++;
                    opacity = 1.0;
                }
                this.setState({opacity: opacity, count: count});
            }.bind(this), 100)
        },
        componentWillUpdate: function () {
            console.log("componentWillUpdate");
        },
        componentDidUpdate: function () {
            console.log("componentDidUpdate");
        },
        componentWillUnmount: function () {
            console.log("componentWillUnmount");
        },
        componentWillReceiveProps: function () {
            console.log("componentWillReceiveProps");
        },
        render: function () {
            return (
                <div style={
       {opacity: this.state.opacity}}>
                    <h3>Hello,{this.props.name}</h3>
                </div>
            )
        },
        getInitialState: function () {
            return {opacity: 1.0, count: 0}
        },
        shouldComponentUpdate: function (nextProps, nextState) {
            return nextState.count < 2;
        }
    });
    
    ReactROM.render(<HelloC7 name="World"/>, window.document.getElementById("c7"));
    
    /**
     * 添加jquery分两步，1:添加扩展库，2:在index.html中加入jquery引用。
     * 组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，
     * 等到请求成功，再用 this.setState 方法重新渲染 UI
     * */
    var HelloC8 = React.createClass({
        getInitialState: function () {
            return {userName: ""}
        },
        componentDidMount: function () {
            $.get(this.props.source, function (result) {
                var lastGist = result[0];
                if (this.isMounted()) {
                    this.setState({
                        userName: lastGist.owner["login"],
                        lastGistUrl: lastGist["html_url"]
                    })
    
                }
            }.bind(this))
        },
        render: function () {
            return (
                <di>
                    {this.state.userName}'s last gist is
                    <a href={this.state.lastGistUrl}>here</a>
                </di>
            )
        }
    });
    
    ReactROM.render(<HelloC8 source="https://api.github.com/users/octocat/gists"/>,
        window.document.getElementById("c8"));
    
    
    var HelloC9 = React.createClass({
        getInitialState: function () {
            return {loading: true, error: null, data: null}
        },
        componentDidMount: function () {
            this.props.promise.then(
                value=>this.setState({loading: false, data: value}),
                function (error) {
                    this.setState({loading: false, error: error})
                }
            )
        },
        render: function () {
            if (this.state.loading) {
                return (<span>loading...</span>)
            }
            else if (this.state.error != null) {
                return (<span>error message:{this.state.error}</span>)
            }
            else {
                var items = this.state.data["items"];
                var repoList = items.map(function (item) {
                    return (
                        <li key={item["name"]}>
                            <a href={item["html_url"]}>{item["name"]}</a>({item["stargazers_count"]}stars)<br/>
                            {item["description"]}
                        </li>
                    )
                });
                return (
                    <div>
                        <h1>Most Popular JavaScript Projects in Github</h1>
                        <ol>{repoList}</ol>
                    </div>)
            }
        }
    });
    
    ReactROM.render(
        <HelloC9
            promise={$.getJSON("https://api.github.com/search/repositories?q=javascript&sort=stars")}/>,
        window.document.getElementById("c9"));