從零開始——React基礎(chǔ)入門（虛擬DOM、JSX語法浸赫、組件化開發(fā)闰围、生命周期、單項(xiàng)數(shù)據(jù)流）

React最初來自Facebook內(nèi)部的廣告系統(tǒng)項(xiàng)目既峡，項(xiàng)目實(shí)施過程中前端開發(fā)遇到了巨大挑戰(zhàn)羡榴，代碼變得越來越臃腫且混亂不堪，難以維護(hù)运敢。他們又對市場的現(xiàn)有的前端mvc框架都不滿意校仑。于是他們決定拋開很多所謂的“最佳實(shí)踐”忠售，重新思考前端界面的構(gòu)建方式，就決定自己寫一套框架來解決這些問題迄沫，然后就有了React稻扬。

后來發(fā)現(xiàn)React框架在開發(fā)中很好用，于是FB投入了更多的人力去開發(fā)這套框架羊瘩，最后在2013年5月宣布開源泰佳。

由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新尘吗，性能出眾乐纸，代碼邏輯卻非常簡單。所以摇予，越來越多的人開始關(guān)注和使用汽绢，認(rèn)為它可能引領(lǐng)未來用戶界面開發(fā)的主流框架。

React 這么火侧戴，那么它到底有什么牛逼的地方宁昭？

特點(diǎn)及優(yōu)勢

1.虛擬dom (開發(fā)時(shí)候不需要在頁面中寫任何dom元素)

2.jsx語法(寫頁面時(shí)候使用javascript xml格式的語法)

3.組件化開發(fā)(react最核心的思想是將頁面中任何一個(gè)區(qū)域或者元素都看成是一個(gè)組件 Component)

4.單向數(shù)據(jù)流(組件和后端之間的數(shù)據(jù)是單向的，從后端流動(dòng)到react組件中)

5.組件生命周期(任何一個(gè)組件在dom中都具有一個(gè)完整的聲明周期酗宋，組件初始化的時(shí)候開始积仗，組件被移除的時(shí)候消失，從而保證性能的優(yōu)越)

虛擬DOM

虛擬DOM則是在DOM的基礎(chǔ)上建立了一個(gè)抽象層蜕猫，我們對數(shù)據(jù)和狀態(tài)所做的任何改動(dòng)寂曹，都會(huì)被自動(dòng)且高效的同步到虛擬DOM，最后再批量同步到DOM中渺氧。

虛擬DOM會(huì)使得App只關(guān)心數(shù)據(jù)和組件的執(zhí)行結(jié)果，中間產(chǎn)生的DOM操作不需要App干預(yù)蹬屹，而且通過虛擬DOM來生成DOM侣背，會(huì)有一項(xiàng)非晨可觀收益——-性能贩耐。

React會(huì)在內(nèi)存中維護(hù)一個(gè)虛擬DOM樹，當(dāng)我們對這個(gè)樹進(jìn)行讀或?qū)懙臅r(shí)候潮太，實(shí)際上是對虛擬DOM進(jìn)行的朋沮。當(dāng)數(shù)據(jù)變化時(shí)蒂胞，然后React會(huì)自動(dòng)更新虛擬DOM骗随，然后拿新的虛擬DOM和舊的虛擬DOM進(jìn)行對比，找到有變更的部分，得出一個(gè)Patch松逊，然后將這個(gè)Patch放到一個(gè)隊(duì)列里，最終批量更新這些Patch到DOM中暇矫。

缺陷——首次渲染大量DOM時(shí)因?yàn)槎嗔艘粚犹摂MDOM的計(jì)算，會(huì)比innerHTML插入方式慢择吊，所以使用時(shí)盡量不要一次性渲染大量DOM李根。

JSX語法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx、es6轉(zhuǎn)換成js几睛、es5 -->
    <script src="build/browser.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- bebel是工具房轿，把es6轉(zhuǎn)換成es5 -->
    <script type="text/babel">
            ReactDOM.render(<h1>React</h1>,document.getElementById("root"))
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx、es6轉(zhuǎn)換成js所森、es5 -->
    <script src="build/browser.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- bebel是工具冀续，把es6轉(zhuǎn)換成es5 -->
    <script type="text/babel">
        var arr = ["張三","李四","王五"];
        ReactDOM.render(<div>{
            arr.map(function(ele,index){
                return <p>{ele}</p>
        })
        }</div>,document.getElementById("root"))
    </script>
</body>
</html>

JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析必峰；遇到代碼塊（以 { 開頭）洪唐，就用 JavaScript 規(guī)則解析。

組件

模塊化中的模塊一般指的是為了實(shí)現(xiàn)某些功能的代碼片段吼蚁，模塊化主要實(shí)現(xiàn)了代碼分工凭需，分模塊完成，強(qiáng)調(diào)的是功能肝匆；

組件是組成頁面的部件粒蜈，內(nèi)部封裝了組件的結(jié)構(gòu)、樣式旗国、行為枯怖，更多的考慮代碼的復(fù)用性，頁面結(jié)構(gòu)的實(shí)現(xiàn)

在組件化開發(fā)中能曾，一個(gè)模塊可能需要多個(gè)組件（比如評價(jià)的模塊度硝，可能需要列表的組件、按鈕的組件寿冕、用戶信息組件…）蕊程，但是有些模塊也可以跟組件沒有關(guān)系，只是實(shí)現(xiàn)一些功能驼唱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx藻茂、es6轉(zhuǎn)換成js、es5 -->
    <script src="build/browser.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            position: fixed;left: 0;top: 0;height: 44px;border-bottom: 1px solid #ccc; text-align: center;width: 100%;line-height: 44px;
        }
        .footer{
             position: fixed;left: 0;bottom: 0;height: 44px;border-top: 1px solid #ccc; width: 100%;line-height: 44px;
             list-style: none;
        }
        .footer li{
            float: left;width: 25%;text-align: center;
        }
        .content{
            padding-top: 45px;padding-bottom: 45px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- bebel是工具，把es6轉(zhuǎn)換成es5 -->
    <!-- 組件都是用面向?qū)ο髽?gòu)建的辨赐，組件經(jīng)常會(huì)被復(fù)用优俘，用面向?qū)ο髮懣梢宰龅焦灿茫M件名稱要大寫 -->
    <!-- 不能用class掀序，class在js中是保留字符 -->
    <script type="text/babel">
    var Header = React.createClass({
        render:function(){
            return <div className="header">網(wǎng)站頭部</div>
        }
    })
    var Footer = React.createClass({
        render:function(){
            return <ul className="footer">
                <li>首頁</li>
                <li>列表</li>
                <li>購物車</li>
                <li>我的</li>
            </ul>
        }
    })
    var Content = React.createClass({
        render:function(){
            return <div className="content">內(nèi)容</div>
        }
    })
    var IndexPage = React.createClass({
        render:function(){
            return <div className="page">
                <Header/>
                <Footer/>
                <Content/>
            </div>
        }
    })
    ReactDOM.render(<IndexPage/>,document.getElementById("root"))
    </script>
    <!-- 組件里面render的內(nèi)容帆焕，就是當(dāng)組件被調(diào)用顯示的內(nèi)容 -->
</body>
</html>
單項(xiàng)數(shù)據(jù)流

props（properties 特性）是在調(diào)用時(shí)候被調(diào)用者設(shè)置的，只設(shè)置一次森枪，一般沒有額外變化视搏，可以把任意類型的數(shù)據(jù)傳遞給組件审孽，盡可能的吧props當(dāng)做數(shù)據(jù)源县袱，不要在組件內(nèi)部設(shè)置props。

組件傳參：
1.this.props.children
2.this.props.xxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx佑力、es6轉(zhuǎn)換成js式散、es5 -->
    <script src="build/browser.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            position: fixed;left: 0;top: 0;height: 44px;border-bottom: 1px solid #ccc; text-align: center;width: 100%;line-height: 44px;
        }
        .footer{
             position: fixed;left: 0;bottom: 0;height: 44px;border-top: 1px solid #ccc; width: 100%;line-height: 44px;
             list-style: none;
        }
        .footer li{
            float: left;width: 25%;text-align: center;
        }
        .content{
            padding-top: 45px;padding-bottom: 45px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- bebel是工具，把es6轉(zhuǎn)換成es5 -->
    <!-- 組件都是用面向?qū)ο髽?gòu)建的打颤，組件經(jīng)常會(huì)被復(fù)用暴拄，用面向?qū)ο髮懣梢宰龅焦灿茫M件名稱要大寫 -->
    <!-- 不能用class编饺，class在js中是保留字符 -->
    <script type="text/babel">
    var Header = React.createClass({
        render:function(){
            return <div className="header">{this.props.title}</div>
        }
    })
    var Footer = React.createClass({
        render:function(){
            return <ul className="footer">
                <li>首頁</li>
                <li>列表</li>
                <li>購物車</li>
                <li>我的</li>
            </ul>
        }
    })
    var Content = React.createClass({
        render:function(){
            return <div className="content">{this.props.children}</div>
        }
    })
    var List = React.createClass({
        render:function(){
            return <ul>
                <li>商品1</li>
                <li>商品2</li>
                <li>商品3</li>
            </ul>
        }
    })
    var IndexPage = React.createClass({
        render:function(){
            return <div className="page">
                <Header title="首頁" />
                <Footer/>
                <Content>
                    <List/>
                </Content>
            </div>
        }
    })
    ReactDOM.render(<IndexPage/>,document.getElementById("root"))
    </script>
    <!-- 組件里面render的內(nèi)容乖篷，就是當(dāng)組件被調(diào)用顯示的內(nèi)容 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx、es6轉(zhuǎn)換成js透且、es5 -->
    <script src="build/browser.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            position: fixed;left: 0;top: 0;height: 44px;border-bottom: 1px solid #ccc; text-align: center;width: 100%;line-height: 44px;
        }
        .footer{
             position: fixed;left: 0;bottom: 0;height: 44px;border-top: 1px solid #ccc; width: 100%;line-height: 44px;
             list-style: none;
        }
        .footer li{
            float: left;width: 25%;text-align: center;
        }
        .content{
            padding-top: 45px;padding-bottom: 45px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- bebel是工具撕蔼，把es6轉(zhuǎn)換成es5 -->
    <!-- 組件都是用面向?qū)ο髽?gòu)建的，組件經(jīng)常會(huì)被復(fù)用秽誊，用面向?qū)ο髮懣梢宰龅焦灿镁ň冢M件名稱要大寫 -->
    <!-- 不能用class，class在js中是保留字符 -->
    <script type="text/babel">
    var Header = React.createClass({
        render:function(){
            return <div className="header">{this.props.title}</div>
        }
    })
    var Footer = React.createClass({
        render:function(){
            return <ul className="footer">
                <li>首頁</li>
                <li>列表</li>
                <li>購物車</li>
                <li>我的</li>
            </ul>
        }
    })
    var Content = React.createClass({
        render:function(){
            return <div className="content">{this.props.children}</div>
        }
    })
    var List = React.createClass({
        render:function(){
            return <ul>
                {this.props.listData.map((ele,index)=>{
                    return <li>商品{ele}</li>
                })}
            </ul>
        }
    })
    var IndexPage = React.createClass({
        render:function(){
            return <div className="page">
                <Header title="首頁" />
                <Footer/>
                <Content>
                    <List listData={["1","2","3"]}/>
                </Content>
            </div>
        }
    })
    ReactDOM.render(<IndexPage/>,document.getElementById("root"))
    </script>
    <!-- 組件里面render的內(nèi)容锅论，就是當(dāng)組件被調(diào)用顯示的內(nèi)容 -->
</body>
</html>
組件的生命周期

隨著該組件的props（數(shù)據(jù)）或者state（狀態(tài)）發(fā)生改變讼溺，它的DOM表現(xiàn)也將有相應(yīng)的變化，一個(gè)組件就是一個(gè)狀態(tài)機(jī)：對于特定的輸入最易，它總會(huì)返回一致的輸出怒坯。 React為每個(gè)組件提供了生命周期鉤子函數(shù)去響應(yīng)不同的時(shí)刻，組件的生命周期分為三個(gè)部分：（1）實(shí)例化藻懒；（2）存在期敬肚；（3）銷毀&清理期。

鉤子函數(shù)類似有回調(diào)函數(shù)（callback）束析，但他是在方法內(nèi)容一開始調(diào)用的艳馒，而callback是在事件結(jié)束調(diào)用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 核心 -->
    <script src="build/react.min.js"></script>
    <!-- 渲染dom -->
    <script src="build/react-dom.min.js"></script>
    <!-- 把jsx、es6轉(zhuǎn)換成js弄慰、es5 -->
    <script src="build/browser.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    //getInitialState給組件設(shè)置默認(rèn)的狀態(tài)
    //setState是React方法來修改state第美，視圖可以自動(dòng)更新
    var Switch = React.createClass({
        getInitialState:function(){
            return{
                show:false
            }
            console.log("設(shè)置初始狀態(tài)")
        },
        changeShow:function(){
            this.setState({
                show:!this.state.show
            })
        },
        componentWillMount:function(){
            console.log("即將添加")
        },
        render:function(){
            return (
                <div id="warp" ref="warp">
                    <button onClick={this.changeShow} ref="btn">切換</button>
                    <div style={{display:this.state.show?'block':'none'}}>虛擬DOM，組件化開發(fā)陆爽，生命周期什往，jsx語法，單項(xiàng)數(shù)據(jù)流</div>
                </div> 
            )
        },
        componentDidMount:function(){
            //獲取真實(shí)dom慌闭，請求數(shù)據(jù)
            //this.refs或取到的是設(shè)置了ref屬性的dom集合
            console.log("添加完成")
            console.log(this.refs)
        }
    })
    ReactDOM.render(<Switch/>,document.getElementById("root"))
</script>
</html>

實(shí)例化階段（在組件調(diào)用之前的——?jiǎng)?chuàng)建階段）

getDefaultProps方法發(fā)生在創(chuàng)建組件類的時(shí)候别威，即調(diào)用React.createClass的時(shí)候。這個(gè)階段只會(huì)觸發(fā)一個(gè)getDefaultProps方法驴剔，給this.props作為該組件的默認(rèn)屬性省古。

props屬性是一個(gè)對象，是組件用來接收外面?zhèn)鱽淼膮?shù)的組件內(nèi)部是不允許修改自己的props屬性的丧失，只能通過父組件來修改豺妓。在getDefaultProps方法中，是可以設(shè)定props默認(rèn)值的布讹。

getInitialState 初始化組件的state的值琳拭，其返回值會(huì)賦值給組件的this.state屬性。對于組件的每個(gè)實(shí)例來說描验，這個(gè)方法的調(diào)用次數(shù)有且只有一次白嘁。

componentWillMount 此方法會(huì)在完成首次渲染之前被調(diào)用。這也是在render方法調(diào)用前可以修改組件state的最后一次機(jī)會(huì)膘流。

render 生成頁面需要的虛擬DOM結(jié)構(gòu)絮缅，用來表示組件的輸出。render方法需要滿足：（1）只能通過this.props和this.state訪問數(shù)據(jù)睡扬；（2）可以返回null盟蚣、false或者任何React組件；（3）只能出現(xiàn)一個(gè)頂級組件卖怜；（4）必需純凈屎开，意味著不能改變組件的狀態(tài)或者修改DOM的輸出。

componentDidMount 該方法發(fā)生在render方法成功調(diào)用并且真實(shí)的DOM已經(jīng)被渲染之后马靠，在該函數(shù)內(nèi)部可以通過this.getDOMNode()來獲取當(dāng)前組件的節(jié)點(diǎn)奄抽。然后就可以像Web開發(fā)中的那樣操作里面的DOM元素了。

存在期

用戶改如果變了組件的state甩鳄，或者要展示的數(shù)據(jù)發(fā)生改變逞度，這時(shí)候需要重新渲染組件。

componentWillReceiveProps 在任意時(shí)刻妙啃，組件的props都可以通過父輩組件來更改档泽。當(dāng)組件接收到新的props(這里不同于state）時(shí)俊戳，會(huì)觸發(fā)該函數(shù)，我們同時(shí)也獲得更改props對象及更新state的機(jī)會(huì)馆匿。

shouldComponentUpdate 該方法用來攔截新的props和state抑胎，然后開發(fā)者可以根據(jù)自己設(shè)定邏輯，做出要不要更新render的決定渐北，讓它更快（當(dāng)props 發(fā)生改變阿逃，或者調(diào)用了setState方法，調(diào)用了setState 方法哪怕state沒有改變也會(huì)觸發(fā)）

componentWillUpdate 與componentWillMount方法類似赃蛛，組件上會(huì)接收到新的props或者state渲染之前恃锉，調(diào)用該方法。但是不可以在該方法中更新state和props呕臂。

render 生成頁面需要的虛擬DOM結(jié)構(gòu)破托，并返回該結(jié)構(gòu)。

componentDidUpdate 與componentDidMount類似诵闭，更新已經(jīng)渲染好的DOM炼团。

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 核心 -->
  <script src="build/react.min.js"></script>
  <!-- 渲染dom -->
  <script src="build/react-dom.min.js"></script>
  <!-- 把jsx澎嚣、es6轉(zhuǎn)換成js疏尿、es5 -->
  <script src="build/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
  var ProductList = React.createClass({
    getDefaultProps:function () {
      //設(shè)置默認(rèn)數(shù)據(jù)
      return {
        listData:[]
      }
    },
    fnClick:function (index) {
      alert(index)
    },
    render:function () {
      return (
        <ul>
          {
            this.props.listData.map(function (ele,index) {
              return <li key={index} onClick={()=>this.fnClick(index)}>{ele}</li>
            }.bind(this))
          }
        </ul>
      )
    }
  });
  var IndexPage = React.createClass({
    render:function () {
      return (
        <div>
          <header>頭部</header>
          <ProductList listData={[1,2,3,4]}/>
          <footer>底部</footer>
        </div>
      )
    }
  });
  ReactDOM.render(<IndexPage/>,document.getElementById("root"));
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市易桃，隨后出現(xiàn)的幾起案子褥琐，更是在濱河造成了極大的恐慌，老刑警劉巖晤郑，帶你破解...
    沈念sama閱讀 222,000評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件敌呈，死亡現(xiàn)場離奇詭異，居然都是意外死亡造寝，警方通過查閱死者的電腦和手機(jī)磕洪，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來诫龙，“玉大人析显，你說我怎么就攤上這事∏┰撸” “怎么了谷异？”我有些...
    開封第一講書人閱讀 168,561評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長锦聊。 經(jīng)常有香客問我歹嘹，道長，這世上最難降的妖魔是什么孔庭？ 我笑而不...
    開封第一講書人閱讀 59,782評論 1贊 298
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任尺上，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘怎抛。我一直安慰自己仰税，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布抽诉。 她就那樣靜靜地躺著陨簇，像睡著了一般。 火紅的嫁衣襯著肌膚如雪迹淌。 梳的紋絲不亂的頭發(fā)上河绽，一...
    開封第一講書人閱讀 52,394評論 1贊 310
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音唉窃，去河邊找鬼耙饰。 笑死，一個(gè)胖子當(dāng)著我的面吹牛纹份，可吹牛的內(nèi)容都是我干的苟跪。 我是一名探鬼主播，決...
    沈念sama閱讀 40,952評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼蔓涧，長吁一口氣：“原來是場噩夢啊……” “哼件已！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起元暴，我...
    開封第一講書人閱讀 39,852評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤篷扩，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后茉盏，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鉴未，經(jīng)...
    沈念sama閱讀 46,409評論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評論 3贊 341
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年鸠姨，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铜秆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,615評論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡讶迁，死狀恐怖连茧，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情添瓷，我是刑警寧澤梅屉，帶...
    沈念sama閱讀 36,303評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站鳞贷，受9級特大地震影響坯汤，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搀愧，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評論 3贊 334
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一惰聂、第九天 我趴在偏房一處隱蔽的房頂上張望疆偿。 院中可真熱鬧，春花似錦搓幌、人聲如沸杆故。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0贊 24
  • 一樁弒父案溉愁，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽处铛。三九已至，卻和暖如春拐揭，著一層夾襖步出監(jiān)牢的瞬間撤蟆，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工堂污， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留家肯，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,041評論 3贊 377
  • 代替公主和親
    正文 我出身青樓盟猖，卻偏偏與公主長得像讨衣，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子式镐，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評論 2贊 359

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南反镇，這只是我在學(xué)習(xí)過程中的一些閱讀筆記，個(gè)人覺得該教程講解深入淺出碟案，比目前大...
    leonaxiong閱讀 2,843評論 1贊 18
  • JSX 知識(shí)準(zhǔn)備 JSX 并不是一門全新的語言愿险，僅僅是一個(gè)語法糖颇蜡，允許開發(fā)者在javascript中編寫XML語言...
    艾倫先生閱讀 4,513評論 4贊 20
  • “人靠衣裝风秤，美靠靚裝”鳖目，為什么人人都愛美？為什么人人都喜歡變成高富帥缤弦？當(dāng)然一方面是為了成為大眾的焦點(diǎn)领迈，最終成功吸引...
    千里星晴閱讀 1,041評論 1贊 0
  • 2017年10月9日 初三第50天 早上我去送她，張同學(xué)心情比較低落碍沐。 昨天預(yù)估分出來后狸捅，覺得自己考砸了，距離自己...
    天空有云閱讀 136評論 0贊 0
  • 有很多名言警句是相互有點(diǎn)矛盾的，它山之石可以攻玉斋陪，小編整理了一些朽褪，不足之處請多多諒解置吓，歡迎補(bǔ)充。（有過有人用名言懟...
    一品唐宋閱讀 699評論 0贊 1