• React了解


    根据博主  http://www.ruanyifeng.com/blog/2015/03/react.html  的几个Demo(https://github.com/ruanyf/react-demos),持续学习一下React,一款负责UI框架的语言(使用虚拟的DOM,并且将它们储存起来,每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比,让变化的部分进行渲染。整个过程没有了获取、操作dom节点的步骤,只有一个渲染的过程,所以react就是一个ui框架。)。

    首先get了几个sublime的快捷键,非常好用!command+D:选中更多的相同元素;command+control+G:选中所有相同项;command+control+上或下:将整行上移或者下移;control+shift+W:将选中的加上标签。这个几个还需持续练习!另外command+回车是换到下一行(光标在本行中)。

    React需要引用的几个JS文件

    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>

    script标签:

    <script type="text/babel"></script>  //为什么写text/bable呢,这样可以使用JSX

    1. ReactDOM.render()方法   html语言可以直接写在里面;
    1 var arr = [
    2   <h1>Hello world!</h1>,
    3   <h2>React is awesome</h2>,
    4 ];
    5 ReactDOM.render(
    6   <div>{arr}</div>,
    7   document.getElementById('example')
    8 );
    document.getElementById('example') 之后无分号!数组使用[]扩住。
     2.React.createClass 方法就用于生成一个组件类
      所有组件类都必须有自己的 render 方法,用于输出组件。
     
    render: function() {},
    propTypes: {}, /*参数校验*/
    XXXX: function(){},
    getInitialState: function() {}/*初始态,然后用户互动,导致状态变化,从而触发重新渲染 UI*/
    

      举一个例子

    <script type="text/babel">
          var Input = React.createClass({
            getInitialState: function() {
              return {value: 'Hello!'};
            },
            handleChange: function(event) {
              this.setState({value: event.target.value});
            },
            render: function () {
              var value = this.state.value;
              return (
                <div>
                  <input type="text" value={value} onChange={this.handleChange} />
                  <p>{value}</p>
                </div>
              );
            }
          });
    
          ReactDOM.render(<Input/>, document.getElementById('example'));
        </script>
    

      


     
  • 相关阅读:
    HTML页面下echarts图形绘制
    nth-child的运用
    黑客零做起
    回溯法-背包问题
    回溯法-迷宫问题
    ECMA概述
    微信小程序-蓝牙
    JavaScript实现千位分隔符
    Vue 就地复用策略
    内联函数inline
  • 原文地址:https://www.cnblogs.com/Neanderthal/p/6662940.html
Copyright © 2020-2023  润新知