react-webpack,react中组件生命周期简单展示

首先配置下webpack.config.js

module.exports={
    entry:{
        demo:'./app/app.js'
    },
    output:{
        path:__dirname+'/build',
        filename:'[name].js',
        library:'game',
        libraryTarget:'umd'
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:'jsx-loader'
            }
        ]
    }
}

入口文件entry,整合js后输出output,loaders:需要jsx-loader将jsx转换成js

创建html

doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题title>
    <meta name="keywords" content="">
    <meta name="description" content="">
head>
<body>
    <div id="out">div>
body>
<script type="text/javascript" src="build/demo.js">script>
html>

上面配置文件中的入口文件./app/app.js

先来创建此文件

var Head=require('./app1.js');
var Con=require('./app2.js');
var Footer=require('./app3.js');
var React=require('react');
var ReactDOM=require('react-dom');
var Demo=React.createClass({
        render:function(){
            return (
) } }) ReactDOM.render(,document.getElementById('out'));

用require先将依赖导入进来,然后就是用react创建组件

再来创建依赖的app1,app2,app3这3个js

var React=require('react');
var Head=React.createClass({
        render:function(){
            return (
head
) } }) module.exports=Head;

简单例子创建完成,需要的react,react-dom,jsx-loader,我们可以使用npm install来创建依赖到项目中。

 

组件的生命周期

1.

getDefaultProps------>getInitialState------>componentWillMount------>render------>componentDidMount------>组件运行

2.运行过程中

分为两种state状态改变和外部props改变

state:

  shouldComponentUpdate------>如果为true------>componentWillUpdate------>render------>componentDidUpdate

props:

  componentWillReceiveProps------>shouldComponentUpdate.....

3.卸载组件

componentWillUnmount

 

转载于:https://www.cnblogs.com/oldcownotGiveup/p/6107894.html

你可能感兴趣的:(react-webpack,react中组件生命周期简单展示)