react学习笔记
我们在使用react的时候,尽量不要操作dom节点,通过状态的改变来渲染这样是最合理的。
这里我记录了react使用ajax的例子进行分析
React.createClass:
创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选
getInitialState:
设置初始的state
componentDidMount:
第一次渲染后调用,只在客户端
setState:
设置状态
componentWillUnmount:
在组件从 DOM 中移除的时候立刻被调用
abort():
会中止一个已经发出的请求
ReactDOM.render:
将模板转为 HTML 语言,并插入指定的 DOM 节点
<body> <div id="example"></div> <script type="text/babel"> 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" />, document.getElementById('example') ); </script> </body>