reactjs的学习和使用

最新推荐文章于 2025-03-22 00:21:01 发布
小程序照片合成
最新推荐文章于 2025-03-22 00:21:01 发布
阅读量355
点赞数
分类专栏： reactjs javascript 文章标签： javascript reactjs
本文链接：https://blog.youkuaiyun.com/cc1314_/article/details/79130626
版权
javascript 同时被 2 个专栏收录
26 篇文章
订阅专栏
reactjs
1 篇文章
订阅专栏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>react</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example1"></div>
<script type="text/babel">
    //如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
    //嵌套多个 HTML 标签，需要使用一个div或其他元素包裹它
    //添加自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
    //在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
    // JSX 中不能使用 if else 语句,可以使用 conditional (三元运算) 表达式来替代
    var i=2,
    mystyle={
        fontSize : 15,
        color : '#ccc'
    };//使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
    var arr = [
        <p>*</p>,
        <p>**</p>,
        <p>***</p>
    ];//JSX 允许在模板中插入数组，数组会自动展开所有成员
    var HelloMessage = React.createClass({
        getDefaultProps:function () {//设置prop
          return {
              text:"!"
          }
        },
        componentDidMount:function () {//在第一次渲染后调用
            console.log(this.props.text);
        },
        //componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
        //componentDidUpdate()在组件完成更新后立即调用。在初始化时不会被调用。
        //componentWillUnmount()在组件从 DOM 中移除的时候立刻被调用。
        render:function (){
            return <h1>Hello {this.props.name}{this.props.text}</h1>;
        }
    });//React.createClass 方法用于生成一个组件类 HelloMessage。
    //原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。
    // 除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
    //向组件传递参数，可以使用 this.props 对象
    ReactDOM.render(
        /*这是注释，注释不需要写在花括号中*/
        <div>
            <h1>hello react!</h1>
            <h2>{i==2?3:1}</h2>
            <h3 style={mystyle}>hello world!</h3>{/*这是注释，注释需要写在花括号中*/}
            <div className="myclass">{arr}</div>
            <HelloMessage name="cc"/>
            <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>,
        /*这是注释，注释不需要写在花括号中*/
        document.getElementById("example1")
        /*这是注释，注释不需要写在花括号中*/
    );
</script>
<!--React JSX 代码放在一个独立文件上,引入该 JS 文件：<script type="text/babel" src="helloworld_react.js"></script>-->
<div id="example2"></div>
<script type="text/babel">
    var WebSite = React.createClass({
        render:function () {
            return (
                <div>
                    <Name name={this.props.name}/>
                    <Link site={this.props.site}/>
                </div>
            );
        }
    });
    var Name = React.createClass({
        render: function() {
            return (
                    <h1>{this.props.name}</h1>
            );
        }
    });
    var Link = React.createClass({
        render: function() {
            return (
                    <a href={this.props.site}>{this.props.site}</a>
            );
        }
    });
    ReactDOM.render(
        <WebSite name="动图菜菜" site="http://www.halicaicai.cn"/>,
        document.getElementById("example2")
    );
</script>
<!--state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。-->
<div id="example3"></div>
<script type="text/babel">
    var LikeButton = React.createClass({
        getInitialState:function () {//设置state
            return {
                liked:false
            };
        },
        handleClick:function (event) {
            this.setState({
                liked:!this.state.liked
            },function () {
                console.log(this.state.liked);
            });
            //设置状态：setState
            //替换状态：replaceState
            //设置属性：setProps
            //替换属性：replaceProps
            //强制更新：forceUpdate
            //获取DOM节点：findDOMNode
            //判断组件挂载状态：isMounted
        },
        render:function () {
            var text = this.state.liked?'喜欢':'不喜欢';
            return (
                    <div onClick={this.handleClick}>
                        你{text}我。点击切换状态
                    </div>
            );
        }
    });
    ReactDOM.render(
        <LikeButton/>,
        document.getElementById("example3")
    );
</script>
<div id="example4"></div>
<!--Props 验证-->
<script type="text/babel">
    var title = "动图菜菜";
    var MyTitle = React.createClass({
        getInitialState:function () {
            return {
                color:"blue"
            }
        },
        propTypes: {
            title: React.PropTypes.string.isRequired,
        },
        render: function() {
            return <h1 style={{color:this.state.color}}> {this.props.title} </h1>;
        }
    });
    ReactDOM.render(
            <MyTitle title={title} />,
        document.getElementById('example4')
    );
</script>
<div id="example5"></div>
<!--React ajax-->
<script type="text/babel">
    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 (
                    <div>
                        {this.state.username} 用户最新的 Gist 共享地址：
                        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
                    </div>
            );
        }
    });
    ReactDOM.render(
         <UserGist source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('example5')
    );
</script>
<div id="example6"></div><!--在子组件上使用表单-->
<script type="text/babel">
    var Content = React.createClass({
        render: function() {
            return  <div>
                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
                <button onClick={this.props.upDate}>清空</button>
                <h4>{this.props.myDataProp}</h4>
            </div>;
        }
    });
    var HelloMessage = React.createClass({
        getInitialState: function() {
            return {value: 'Hello 动图菜菜www.halicaicai.cn!'};
        },
        handleChange: function(event) {
            this.setState({value: event.target.value});
        },
        update:function (event) {
            this.setState({value:""});
        },
        render: function() {
            var value = this.state.value;
            return <div>
                <Content myDataProp = {value} updateStateProp = {this.handleChange} upDate={this.update} />
            </div>;
        }
    });
    ReactDOM.render(
            <HelloMessage />,
        document.getElementById('example6')
    );
</script>
<div id="example7"></div>
<!--属性ref可以用来绑定到 render() 输出的任何组件上-->
<script type="text/babel">
    var MyComponent = React.createClass({
        handleClick: function() {
            // 使用原生的 DOM API 获取焦点
            this.refs.myInput.focus();
        },
        render: function() {
            //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
            return (
                    <div>
                        <input type="text" ref="myInput" />
                        <input type="button" value="点我输入框获取焦点" onClick={this.handleClick} />
                    </div>
            );
        }
    });
    ReactDOM.render(
            <MyComponent />,
        document.getElementById('example7')
    );
</script>
</body>
</html>