React学习笔记-CSDN博客

本文链接：https://blog.csdn.net/a105037696/article/details/51801516

API的查询

[https://facebook.github.io/react/docs/top-level-api.html]

学习主要来自于ruanyifeng老师的demo

DEMO1

使用React需要调用：

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

另外如果使用React，script的type比较特殊：

<script type="text/babel">

想要进行DOM操作的时候，使用:

ReactDOM.render(a,b)

其中第一个参数是想要输入的HTML文件，第二个参数是DOM的element选中的操作比如：（这个时候其实使用的是JSX)

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

DEMO2:

怎么在render的第一个参数中使用javascript?

<>告诉程序是‘我在使用HTML’的标签。

其中如果使用{} 则会被解析为源生javascript

    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>

DEMO3:

如果var是一个数组，使用ReactDOM.render的时候，数组会被合并，例如：

<script type="text/babel">
  var names = ['Alice', 'Emily', 'Kate'];

  ReactDOM.render(
    <div>
    Hello, {name}!
    </div>,
    document.getElementById('example')
  );
</script>

上面这个例子，输出就会变成 Hello,AliceEmilyKate

DEMO4:

<script type="text/babel">
  var HelloMessage = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}</h1>;
    }
  });

  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  );
</script>

把function压入到tag里面（6666666666的思想）

利用React.createClass创建了一个名为HelloMessage的tag然后将这个tag所代表的function写在render里面。老节奏,render: function里面的代码用 {}包起来。到了ReactDOM.render的时候，读到HelloMessage的tag会去调用这个function，然后这个function返回真正需要的h1来放到DOM里面。
另外需要HelloMessage这种通过React.createClass的component需要用大写字母开头，不然会报错。还有如果React.createClass中, render出来的components拥有多个平级的tag, 要用一个总tag把他们包起来，

比如

var HelloMessage = React.createClass({
  render: function() {
    return <div>
       <h1>sdfsdfsdf</h1>
       <p>sdfsdfsdf</p>
    </div>

不然会出问题的！

DEMO5:

<script type="text/babel">
  var NotesList = React.createClass({
    render: function() {
      return (
        <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
        </ol>
      );
    }
  });

  ReactDOM.render(
    <NotesList>
      <span>hello</span>
      <span>world</span>
    </NotesList>,
    document.getElementById('example')
  );
</script>

使用React.createClass创建一个名为NodesList的tag, 使用createClass中的render方法将一个function压入这个tag中，这个function返回的东西是一个ol,ol中的内容是利用React.Children.map方法将NodesList中的children分别变成li的内容。
其中需要注意的是dom树的结构实际为：

<ol>
    <li><span>hello</span></li>
    <li><span>world</span></li>
</ol>

DEMO6:

关于

   <script type="text/babel">
      var data = 123;
      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },
        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });
      ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

    </script>

在使用React.createClass的时候，除了render还有propTypes这个属性，这个属性为title这个tag设置了一个需要被输入的attribute，而且利用其中的

React.PropTypes.string.isRequired,

还说明了所需数据的数据类型是string,而且是必须需要的，如果没有给出这个值或者给出的值不是我所需要的类型，就会报错。
另外，可以使用getDefaultProps这个属性为React.createClass添加default值，例如:

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

DEMO7

<script type="text/babel">
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
</script>

其中那个ref是用来在MyComponent中寻找带有ref标签并且refmyTextInput的node.

DEMO8

利用this.state可以来确定当前component的状态，（所以把component可以看做一个状态机？）其中还有比较重要的API的包括：setState()，getInitialState()。

  var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },
    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },
    render: function() {
      var text = this.state.liked ? 'like' : 'haven\'t liked';
      return (
        <p onClick={this.handleClick}>
          You {text} this. Click to toggle.
        </p>
      );
    }
  });

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

另外like这个状态其实并没有声明，但是可以直接用。

DEMO9
随时变化：

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')
);