React.js学习2——React 组件生命周期、React AJAX、React 表单与事件
一、React 组件生命周期
组件的生命周期可分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
其实根据这个概念就可以区分出生命周期的各个方法:
生命周期的方法有:
-
componentWillMount 在渲染前调用,在客户端也在服务端。
-
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
-
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
-
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 -
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
-
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
-
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
官方文档:https://reactjs.org/docs/react-component.html#lifecycle-methods
二、React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。
以下实例演示了获取 Github 用户最新 gist 共享描述:
class UserGist extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', lastGistUrl: ''};
}
componentDidMount() {
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() {
this.serverRequest.abort();
}
render() {
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')
);
以上代码使用 jQuery 完成 Ajax 请求。
三、React 表单与事件
HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。
参考文献:http://www.runoob.com/react/react-ajax.html
阅读更多
- ReactJS学习笔记——组件复合及表单的处理
- 【ReactJS】通过一个例子学习React组件的生命周期
- reactjs,组件的生命周期
- reactjs学习笔记2--组件的介绍
- ReactJS组件生命周期详述
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- ReactJS学习系列课程(props 组件属性)
- ReactNative 第六节 实战之ReactJS 组件和生命周期
- React Native实战之ReactJS组件生命周期
- 【JAVASCRIPT】React学习-组件生命周期
- 从零开始前端学习[45]:js中的所谓的事件类型,鼠标事件,表单事件,键盘事件以及系统事件
- react学习(6)——关于组件生命周期的问题
- Vue.js自定义事件的表单输入组件方法
- react学习笔记之组件生命周期
- Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序
- reactjs入门到实战(七)---- React的组件的生命周期
- [React网络整理]React之表单组件的学习笔记
- react 学习--组件的生命周期(三)销毁阶段
- React.js学习之理解JSX和组件
- 老生常谈js-react组件生命周期