REACT 基础入门,结构以及引入

2017-06-08 本文已影响0人海藻web开发

<!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">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上边三个js文件必须在开头就引入,browser.js是转换jsx代码的类库
下边script 的src是text/babel 使用jsx 必须加上把src换成这个

首页写一个helloworld

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

jsx语法

  var names = ['Alice', 'Emily', 'Kate'];

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

js代码放入html中不需要加引号,jsx语法当遇到<就会解析成html,遇到{就会解析成js
会把数组的成员自动提取出来

组件

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

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

注意事项:首字母必须大写,一般采用驼峰命名法,有且只能有一个顶层标签,另外标签的class必须写成className
this.props能拿到传递过来的值,也就是对象的属性

this.props.children

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.body
);

this.props.children 能拿到所有的子节点,然后通过React.Children.map(obj,function(){}) 去除所有节点

获取真实DOM

React都需虚DOM，想要获取真实Dom,你可能会用到ref属性

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

上边代码当你点击focus的时候 input;text 会获取焦点,因为获取的真实demo,所以必须等dom加载完毕,才能执行,否则会报错,可以加到事件之后
React支持js的原生事件,类似onclick变成onClick 等就是驼峰命名法

this.state

交互,组件可以把它看成一个状态机,一开始有了初始状态,用户互动,状态改变,重新渲染

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

上边代码利用getInitialState 创建一个stata liked 就行licked的改变就行不选的render,
this.state 和this.props 的区别:props一般都是不改变的参数

表单

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.body);

上边例子当用户输入的时候,state 实时渲染从而改变p的值

生命周期

组建的生命周期分为三种状态

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

每种状态又有两个处理函数 Will 和Did ,渲染前渲染后

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

一个组建被渲染后的例子

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

dom插入后,开启一个定时器改变文件透明度
注意 style的写法第一层大括号是jsx语法第二层是样式对象

一个ajax请求的例子

var UserGist = React.createClass({
        getInitialState: function() {
          return {
            username: '',
            lastGistUrl: ''
          };
        },

        componentDidMount: function() {
          $.get(this.props.source, function(result) {
            var lastGist = result[0];
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }.bind(this));
        },

        render: function() {
          return (
                  <div>
                  {this.state.username}'s last gist is
          <a href={this.state.lastGistUrl}>here</a>.
          </div>
          );
        }
      });

      ReactDOM.render(
      <UserGist source="https://api.github.com/users/octocat/gists" />,
              document.body
      );

渲染demo 之后通过利用jquery 发送一个ajax 改变state 进行重新渲染