美文网首页
React入门

React入门

作者: 大前端之路 | 来源:发表于2017-05-03 14:08 被阅读0次

<a href="http://www.ruanyifeng.com/blog/2015/03/react.html">React 入门实例教程</a>
1、Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        //验证props
        propTypes: {
            name: React.PropTypes.string.isRequired,
        },
        //默认初始值
        getInitialState: function() {
          return {liked: false,value: 'Hello!'};
        },
        btclick: function() {
            //ref获取真实dom
            this.refs.myTextInput.focus();
        },
        handleClick: function(event) {
          //设置默认初始值的内容,设置完后重新渲染
          this.setState({liked: !this.state.liked});
        },
        inputchange: function(event) {
            this.setState({value: event.target.value});
        },
        render: function() {
          console.log(this.props.name);//获取name属性
          var text = this.state.liked ? 'like' : 'haven\'t liked';
          var value = this.state.value;
          return (
              <div>
                <p onClick={this.handleClick}>
                  You {text} this. Click to toggle.
                </p>
                <input type="text" ref="myTextInput"  value={value} onChange={this.inputchange}/>
                <input type="button" value="Focus the text input" onClick={this.btclick} />
                <p>{value}</p>
                <ol>
                    {
                        React.Children.map(this.props.children, function (child) {
                            return <li>{child}</li>;
                        })
                    }
                </ol>
              </div>
          );
        }
      });
      ReactDOM.render(
        <LikeButton name="this.props获取">
          <span>hello</span>
          <span>world</span>
        </LikeButton>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

相关文章

  • react+webpack项目实际开发应用

    react+webpack项目实际开发应用 在《react入门》和《react入门提高》中我讲了,react的基础...

  • react+webpack项目实际开发应用

    react+webpack项目实际开发应用 在《react入门》和《react入门提高》中我讲了,react的基础...

  • react+webpack项目实际开发应用

    react+webpack项目实际开发应用 在《react入门》和《react入门提高》中我讲了,react的基础...

  • React Native:从入门到原理

    React Native:从入门到原理 React Native:从入门到原理

  • React Native学习资料

    React 入门实例教程React-Native入门指南Flex 布局教程:语法篇React Native探索(二...

  • React Native

    JavaScript 标准参考教程(alpha)ECMAScript 6入门 React 入门实例教程React ...

  • React 实践(一)

    参考:《React 入门实例教程--阮一峰》、《React 学习教程--众成翻译》。React 框架入门学习摘录。...

  • awesome-react-native

    React React 中文文档一定要看官方文档 React 入门实例教程阮一峰老师出品,最好的 react 入门...

  • 慕课视频

    免费 《Web安全-XSS》《ReactNative基础与入门》《React入门》《在React中使用Redux数...

  • React入门-001

    +++Categories = ["React",]Tags = ["React","入门",]date = "2...

网友评论

      本文标题:React入门

      本文链接:https://www.haomeiwen.com/subject/lniktxtx.html