React学习

1. React 安装

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
$ cnpm install [name]

快速构建
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

在浏览器中打开 http://localhost:3000/

2. React 组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React.createClass 方法用于生成一个组件类 HelloMessage。
<HelloMessage /> 实例组件类并输出信息。

3. React 复合组件

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.runoob.com" />,
  document.getElementById('example')
);

4. React State React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

	<script type="text/babel">
      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 ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

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

5. React props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

Props 验证

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

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

6. React 组件 API

	设置状态：setState
	替换状态：replaceState
	设置属性：setProps
	替换属性：replaceProps
	强制更新：forceUpdate
	获取DOM节点：findDOMNode
	判断组件挂载状态：isMounted

7. 组件生命周期

	componentWillMount 在渲染前调用,在客户端也在服务端。
	componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
	componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
	shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
	可以在你确认不需要更新组件时使用。
	componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
	componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
	componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

8. React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

	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" />,
	  mountNode
	);

9. React 表单与事件
   http://www.runoob.com/react/react-forms-events.html


10. React Refs
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

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

猜你喜欢