React进阶学习

-工具类

node、npm、eslint、pretter

语法类

es5、es6

概念类

SPA：单页面应用

MPA：多页面应用

PWA：渐进式 Web App

PWA组成技术

Service Worker：服务工作线程

1.1 常驻内存运行

1.2 代理网络请求

1.3 依赖HTTPS

// npm install serve -g 全局安装服务模块
// 在项目目录下执行 serve 快速启动http本地服务器 localhost:5000
// index.html
<html>
    <head>
        <title>learn PWA</title>
    </head>
    <body>
        <script>
            // 注册 service worker
            navigator.serviceWorker.register('./sw.js', {
                scope: '/'
            }).then(registration => {
                console.log(registration)
            }, error => {
                console.error(error)
            })
        </script>
    </body>
</html>

// sw.js
self.addEventListener('install', event => {
    console.log('install', event)
    // 在 install 执行后 5s 再激活 执行 activate
    /*
    event.waitUntil(new Promise(resolve => {
        setTimeout(resole, 5000)
    }))
    */
    // 强制停止旧的service worker 激活新的 service worker 
    event.waitUntil(self.skipWaiting())
})

self.addEventListener('activate', event => {
    console.log('activate', event)
    // 同样包含 event.waitUntil() 与 install 中用法一样
    event.waitUntil(self.clients.claim())    
})

self.addEventListener('fetch', event => {
    console.log('fetch', event)
})

Promise：”承诺”控制流

2.1 优化回调地狱

2.2 async/await 语法同步化

2.3 Service Worker的API

// callback回调方式
readFile(filename, (err, content) => {
    parseXML(content, (err, xml) => {
        // 
    })
})

readFile(filename).then(content => parseXML(content)).then(xml => {}, err => {})
// 推荐使用
readFile(filename).then(content => parseXML(content)).then(xml => {}).catch(err => {})

Promise.resolve(1)
// 等价于
new Promise(resolve => resolve(1))

Promise.reject(error)
// 等价于
new Promise((resolve, reject) => reject(error))

Promise.all()
Promise.race()

// 替代 Promise 需要 babel 转换
async function readXML(filename) {
   const content = await readFile(filename) 
   const xml = await parseXML(content)
   return xml
}

fetch：网络请求

3.1 比XMLHttpRequest更简洁

3.2 Promise风格

3.3 依旧存在不足

<html>
    <head>
        <title>learn PWA</title>
    </head>
    <body>
        <script>
            // 原始ajax请求
         const xhr = new XMLHttpRequset()
         xhr.responseType = 'json'
         xhr.onreadstatechange = () => {
             if(xhr.readyState === 4){
                 if(xhr.status >= 200 && xhr.status < 300) {
                     console.log(xhr.response)
                      }
                  }
              }
              xhr.open('GET', './useinfo.json', true)
              xhr.send(null)
            
              // fetch 实现
                const req = new Request('./useinfo.json', {
                   method: 'GET',
                   headers: new Headers(),
                   credentials: 'include'    
                })
                /*
                fetch('./useinfo.json', {
              method: 'GET',
                   headers: new Headers(),
                   credentials: 'include' 
                })
                */
                 fetch(req)
                  .then(res => res.json())
                  .then(info => console.log(info))
            
              // 更好的方案 axios
        </script>
    </body>
</html>

cache API：支持资源的缓存系统

4.1 缓存资源（css/scripts/image）

4.2 依赖 Service Worker 代理网络请求

4.3 支持离线程序运行

// index.html
<html>
    <head>
        <title>learn PWA</title>
    </head>
    <body>
        <h1>
            hello PWA
        </h1>
        <script>
            // 注册 service worker
            navigator.serviceWorker.register('./sw.js', {
                scope: '/'
            }).then(registration => {
                console.log(registration)
            }, error => {
                console.error(error)
            })
        </script>
    </body>
</html>

// sw.js
const CACHE_NAME = 'cache-v1'

self.addEventListener('install', event => {
    console.log('install', event)
    event.waitUntil(caches.open(CACHE_NAME).then(cache => {
        cache.addAll([
            './',
            './index.css'
        ])
    }))  
})

self.addEventListener('activate', event => {
    console.log('activate', event)
     // 同样包含 event.waitUntil() 与 install 中用法一样
    event.waitUntil(caches.keys().then(cacheNames => {
        return Promise.all(cacheNames.map(cacheName => {
            if(cacheName !== CACHE_NAME){
                return caches.delete(cacheName)
            }
        }))
    }))    
})

self.addEventListener('fetch', event => {
    console.log('fetch', event)
    event.respondwWidth(caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(res => {
            if(res) {
                return res
            }
            return fetch(event.request).then(res => {
                cache.put(event.request, res.clone())
                return res
            })
        })
    }))
})

Notification API：消息推送

5.1 依赖用户授权

5.2 适合在Service Worker中推送

// 在页面上下文中查看用户授权
Notification.permission // defalut 默认 granted 允许 denied 拒绝
// 在页面上下文中弹出授权
Notification.requestPermission().then(permission => console.log(permission))
// 弹出通知消息
new Notification("HELLO NOTIFICATION", {body: 'this is from console'})
// 在 Service Worker 上下文 中不允许弹出授权请求
// 在 Service Worker 上下文中 弹出通知消息
self.registration.showNotification("HELLO NOTIFICATION", {body: 'this is from sw'})

在webpack中开启PWA（create-react-app中已经集成service worker）

谷歌推出 workbox

效率类

原则类

eject

npm run eject 打开create-react-app的webpack.config,js

React 最新特性

context

定义：提供一种方式，能够让数据在组件树中传递而不必一级一级手动传递

import React, { createContext } from 'react'

const BatteryContext = createContext()
const OnlineContext = createContext()

// 第三级组件
class Leaf extend Component {
    render() {
        return (
            <BatteryContext.Consumer>
                {
                    battery => (
                      <OnlineContext.Consumer>
                            {
                                online => <h1>Battery: {battery}, Online: {String(online)}</h1>
                            }
                        </OnlineContext.Consumer>
                    ) 
                }
            </BatteryContext.Consumer>
        )
    }
}

// 中间组件
class Middle extend Component {
    render() {
        return <Leaf/>
    }
}

// 顶级组件
class App extend Component {
    state = {
        battery: 60,
        online: false
    }
    render() {
        const { battery, online } = this.state
        return (
          <BatteryContext.Provider value={battery }>
                <OnlineContext.Provider value={online}>
                    <button
                        type="button"
                        onclick={() => this.setState({battery: battery - 1})}   
                     >
                        点击-1
                    </button>
                     <button
                        type="button"
                        onClick={() => this.setState({online: !online})}   
                     >
                        点击切换
                    </button>
                <Middle />
                </OnlineContext.Provider>
            </BatteryContext.Provider>
        )
    }
}

ContextType简化context的使用

import React, { createContext } from 'react'

const BatteryContext = createContext(90) // 90 为默认值

// 第三级组件
class Leaf extends Component {
    static ContextType = BatteryContext
    render() {
        const battery = this.context
        return (
           <h1>Battery: {battery}</h1>
        )
    }
}

// 中间组件
class Middle extends Component {
    render() {
        return <Leaf/>
    }
}

// 顶级组件
class App extends Component {
    state = {
        battery: 60
    }
    render() {
        const { battery, online } = this.state
        return (
          <BatteryContext.Provider value={battery }>              
                <button
                    type="button"
                    onClick={() => this.setState({battery: this.battery - 1})}   
                 >
                    点击-1
                </button>
                <Middle />
            </BatteryContext.Provider>
        )
    }
}

lazy 与 Suspense：组件的懒加载

// about 组件
import React, { Component } from 'react'

export default class About extends Component {
    render () {
        return (
          <h1>About</h1>
        )
    }
}

// APP 组件
import React, { Component, lazy, Suspense } from 'react'

const About = lazy(() => import(/* webpackChunkName: "about" */'./About.jsx'))

class App extends Component {
    state = {
        hasError: false
    }
  // 捕捉异常的静态方法 
    static getDerivedStateFromError() {
        return { 
            hasError: true 
        }
    }
    // 捕获异常的生命周期函数
    /*
    componentDidCatch () {
        this,setState({
            hasErrir: true
        })
    }
    */
    render () {
        return (
            if (this.state.hasError) {
              return <div>error</div>
          }
          <div>
                <Suspense fallback={<div>loading</div>}>
                  <About></About>
                </Suspense>
            </div>
        )
    }
}

export default App

memo 和 PureComponent：避免子组件的重复渲染

import React, { Component, PureComponent} from 'react'

/*
class Foo extends Component {
    
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.name === this.props.name) {
            return false
        }
        return true
    }
  */
    
class Foo extends PureComponent {
    
    /*
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.name === this.props.name) {
            return false
        }
        return true
    }
    */
    render() {
        console.log('Foo render')
        return null
    }
}

class App extends Component {
    state = {
        count: 0
    }
    render() {
      return (
          <div>
                <button
                  type="button"
                    onClick={() => {this.setState({ count: this.count + 1 })}}
                >Add</button>
              <Foo name="xinmin" />
            </div>
        )
    }
}

import React, { Component, PureComponent, memo } from 'react'

const Foo = memo((props) => {
    console.log('Foo render')
    return <div>{props.person.age}</div>
})

class App extends Component {
    state = {
        count: 0,
        person: {
            age: 1
        }
    }
    render() {
      return (
          <div>
                <button
                  type="button"
                    onClick={() => {
                        person.age++
                        this.setState({ person })
                    }}
                >Add</button>
              <Foo person={person} />
            </div>
        )
    }
}

Hooks

使用useState简化状态的写法

import React, { component } from 'react'

class App extends Component {
    state = {
        count: 0
    }
    render() {
      const { count } = this.state
         return (
          <button
              type="button"
                onClick={() => {this.setState({count: count + 1})}}
             >
             点击 （{count}）
             </button>
         )
    }
}

export default App

import React, { useState } from 'react'

function App() {
    const [ count, setCount ] = useState(0)
    return (
        <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）
        </button>
    )
}

export default App

npm i eslint-plugin-react-hooks -D 可以检测Hooks的错误，需要在package.json中配置

"eslintConfig": {
    "extends": "react-app",
    "plugins": [
        "react-hooks/rules-of-hooks": "error"
    ]
}

import React, { useState } from 'react'

function App(props) {
    const [ count, setCount ] = useState(() => {
        console.log('initial count')
        return props.defaultCount || 0
    })
    return (
        <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）
        </button>
    )
}

export default App

使用useEffect简化副作用的写法

import React, { component } from 'react'

class App extends Component {
    state = {
        count: 0,
        size: {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

    onResize = () => {
        this.setState({
            size: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        })
    }
  
    componentDidMount() {
      document.title = this.state.count
      window.addEventListenner('resize', this.onResize, false)
    }

    componentWillMount() {
      window.removeEventListener('resize', this.onResize, false)
    }
  
    componentDidUpdate() {
      document.title = this.state.count
    }
  
    render() {
      const { count, sizehis.state
         return (
          <button
              type="button"
                onClick={() => {this.setState({count: count + 1})}}
             >
             点击 （{count}）
             Size: {size.width}x{size.height}
             </button>
         )
    }
}

export default App

import React, { useState, useEffect } from 'react'

function App(props) {
    const [ count, setCount ] = useState(0)
    const [ size, setSize ] = useState({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })
    
    const onResize = () => {
        setSize({
            width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        })
    }
    
    useEffect(() => {
        document.title = count
    })
    
    useEffect(() => {
        window.addEventListener('resize', onResize, false)
        
        return () => {
            window.removeEventListener('resize', onResize, false)
        }
    }, [])
    
    return (
        <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）
            Size: {size.width}x{size.height}
        </button>
    )
}

export default App

使用useContext跨层级组件传值

import React, { useState, createContext, useContext } from 'react'

// 在类组件中使用context
class Foo extends React.Component {
    render() {
        return (
          <CountContext.Consumer>
                {
                    count => <h1>count: {count}</h1>
                }
            </CountContext.Consumer>
        )
    }
}

// 在类组件中使用 contextType 简化 context 的使用
class Bar extends React.Component {
    static contextType = CountContext
    render() {
        const count = this.context
        return (
          <h1>{count}</h1>
        )
    }
}

// 在函数组件中使用 context
function Counter() {
    const count = useContext(CountCountext)
    return (
      <h1>{count}</h1>
    )
}

const CountContext = createContext()

function App(props) {
    const [ count, setCount ] = useState(0)
    return (
        <div>
            <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）
          </button>
            <CountContext.Provider value={count}>
                <Foo/>
                <Bar/>
                <Counter/>
            </CountContext.Provider>
        </div>
    )
}

export default App

使用useMemo优化性能，避免子组件重复渲染

import React, { useState, useMemo, memo, useCallback } from 'react'

const Counter = memo(function Counter(props) {
    console.log('Counter render!')
    return (
      <h1 onClick={props.onClick}>count:{props.count}</h1>
    )
})

function App(props) {
    const [ count, setCount ] = useState(0)
    
    const double = useMemo(() => {
        return count*2
    }, [count===3])
    
    const onClick = useCallback(() => {
        console.log('Click')
    }, [])
    
    // 如果 useMemo 返回的是一个函数 简写成 useCallback
    /*
    const onClick = useMemo(() => {
        return () => {
            console.log('Click')
        }
    }, [])
    */
    return (
        <div>
            <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）, double: {double}
          </button>
          <Counter count={count} onClick={onClick}/>
        </div>
    )
}

export default App

使用useRef

import React, { PureComponent, useState, useMemo, memo, useCallback, useRef } from 'react'

/* 函数组件不能别 ref 获取
const Counter = memo(function Counter(props) {
    console.log('Counter render!')
    return (
      <h1 onClick={props.onClick}>count:{props.count}</h1>
    )
})
*/
class Countter extends PureComponent {
    speak() {
        console.log(`now counter is:${this.props.count}`)
    }
    render() {
        const { props } = this
        return (
          <h1 onClick={props.onClick}>count:{props.count}</h1>
        )
    }
}

function App(props) {
    const [ count, setCount ] = useState(0)
    const counterRef = useRef()
    
    const double = useMemo(() => {
        return count*2
    }, [count===3])
    
    const onClick = useCallback(() => {
        console.log('Click')
        //console.log(counterRef.current)
        counterRef.current.speak()
    }, [counterRef])
    
    return (
        <div>
            <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）, double: {double}
          </button>
          <Counter ref={counterRef} count={count} onClick={onClick}/>
        </div>
    )
}

export default App

import React, { PureComponent, useEffect, useState, useMemo, memo, useCallback, useRef } from 'react'

/* 函数组件不能别 ref 获取
const Counter = memo(function Counter(props) {
    console.log('Counter render!')
    return (
      <h1 onClick={props.onClick}>count:{props.count}</h1>
    )
})
*/
class Countter extends PureComponent {
    speak() {
        console.log(`now counter is:${this.props.count}`)
    }
    render() {
        const { props } = this
        return (
          <h1 onClick={props.onClick}>count:{props.count}</h1>
        )
    }
}

function App(props) {
    const [ count, setCount ] = useState(0)
    const counterRef = useRef()
    const it = useRef()
    
    const double = useMemo(() => {
        return count*2
    }, [count===3])
    
    const onClick = useCallback(() => {
        console.log('Click')
        //console.log(counterRef.current)
        counterRef.current.speak()
    }, [counterRef])
    
    useEffect(() => {
        it.current = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
    }, [])
    
    useEffect(() => {
        if(count >= 10){
            clearInterval(it.current)
        } 
    },[])
    
    return (
        <div>
            <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）, double: {double}
          </button>
          <Counter ref={counterRef} count={count} onClick={onClick}/>
        </div>
    )
}

export default App

自定义的Hooks

import React, { PureComponent, useEffect, useState, useMemo, memo, useCallback, useRef } from 'react'

// 自定义hook函数
function useCount(defaultCount) {
    const [count, setCount] = useState(defaultCount)
    const it = useRef()

    useEffect(() => {
        it.current = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
    }, [])
    
    useEffect(() => {
        if(count >= 10){
            clearInterval(it.current)
        } 
    })
    return [count, setCount]
}

// 自定义hook函数，返回 jsx
function useCounter(count) {
    return (
      <h1>{count}</h1>
    )
}

function App(props) {
    const [ count, setCount ] = useCount(0)
    const Counter = useCounter(count)
    
    return (
        <div>
            <button
            type="button"
            onClick={() => {setCount( count + 1)}}
            >
            点击 （{count}）
          </button>
          { Counter }
        </div>
    )
}

export default App

Hooks的使用规则

1. 只在最顶层中使用hooks，不在循环、判断等条件下使用
2. 只在函数组件中使用，不在普通函数中使用

Hooks常见问题

对传统React编程影响

生命周期

图片.png

constructor：在函数组件中用useState来初始化

getDerivedStateFromProps

class Counter extends Component {
    state = {
        overflow: false
    }
    static getDerivedStateFromProps(props, state) {
        if(props.count > 10) {
            return {
                overflow: true
            }
        }
    }
}

function Counter(props) {
    const [overFlow, setOverflow] = useState(false)
    
    if(props.count > 10) {
        setOverflow(true)
    }
}

shouldComponentUpdate：在函数组件中使用memo
render：函数组件本身返回 jsx
componentDidMount
componentWillUnmount

componentDidUpdate

function App() {
    useEffect(() => {
        // componentDidMount
        return () => {
            // componentWillUnmount
        }
    }, [])
    
    let renderCounter = useRef(0)
    renderCounter.current++
    
    useEffect(() => {
        if(renderCounter > 1){
            // componentDidUpdate
        }
    })
}

类成员变量如何映射到Hooks？

class App {
    it = 0
}

funtion App() {
    const it = useRef(0)
}

Hooks中如何获取历史props和state？

function Counter() {
    const [count, setCount] = useState(0)
    const prevCountRef = useRef()
    
    useEffect(() => {
        prevCountRef.current = count
    })
    
    const prevCount = prevCountRef.current
    
    return <h1>Now: {count}, before: {prevCount}</h1>
}

如何强制更新一个hooks组件？

function Counter() {
    const [count, setCount] = useState(0)
    const [updater, setUpdater] = useState(0)
    const prevCountRef = useRef()

    function forceUpdater() {
        setUpdater(updater => updater + 1)
    }

    useEffect(() => {
        prevCountRef.current = count
    })

    const prevCount = prevCountRef.current

    return <h1>Now: {count}, before: {prevCount}</h1>
}

Redux

状态容器与数据流管理

redux的三大原则

 2.1 单一数据源

 2.2 状态不可变

 2.3 纯函数修改状态

没有redux的世界，纯 Hooks 开发 TodoList

.todo-list {
    width: 550px;
    margin: 300px auto;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 25px 50px 0 rgba(0,0,0,0.1)
}
.control h1 {
    width: 100%;
    font-size: 100px;
    text-align: center;
    margin: 0;
    color: rgba(175,47,47,0.15);
}
.control .new-todo {
 padding: 16px 16px 16px 60px;
    border: 0;
    outline: none;
    font-size: 24px;
    box-sizing: border-box;
    line-height: 1.4rem;
    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.3);
}
.todos {
    margin: 0;
    padding: 0;
    list-style: none;
}
.todo-item {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 24px;
    display: flex;
    align-item: center;
}
.todo-item input {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 20px;
}
.todo-item label {
    flex: 1;
    padding: 0;
    line-height: 1.2rem;
    display: block;
}
.line-item label.complete {
    text-decoration: line-through;
}
.todo-item button {
    border: 0;
    outline: 0;
    display: block;
    width: 40px;
    text-align: center;
    font-size: 30px;
    color: #cc9a9a;
}

import React, { useState, useCallback, useRef, memo } from 'react'
import './App.css'

let idSeq = Date.now()
const LS_KEY = '_$-todos_'

const Control = memo(function Control(props) {
    const { addTodo } = props
    const inputRef = useRef()
    
    const onSubmit = (e) => {
        e.preventDefault()
        const newText = inputRef.current.value.trim()
        if(newText.length === 0) {
            return
        }
        addTodo({
            id: ++idSeq,
            value: newText,
            complete: false
        })
        inputRef.current.value = ''
    }
    
    return (
     <div className="control">
         <h1>
             todos
            </h1>
            <form onSubmit={}>
             <input 
                     type="text"
                    ref={inputRef}
                    className="new-todo"
                    placeholder="输入新的待办"
                 />
            </form>
        </div>
    )
})

const TodoItem = memo(function TodoItem(props) {
    const {
        todo: {
            id,
            text,
            complete
        },
        toggleTodo,
        removeTodo
    } = props
    
    const onChange = () => {
        toggleTodo(id)
    }
    
    const onRemove = () => {
        removeTodo(id)
    }
    
    return (
     <li className="todo-item">
         <input type="checkbox" onChange={onChange} checked={complete}/>
            <label className={complete ? 'complete' : ''}>{text}</label>
            <button onClick={onRemove}>$#xd7</button>
        </li>
    )
})

const Todos = memo(funtion Todos(props) {
    const { todos, toggleTodo, removeTodo } = props
    return (
     <ul>
            {
                todos.map(todo => {
                    return (<todoItem 
                                 key={todo.id}
                                 todo={todo}
                                 toggleTodo={toggleTodo}
                                removeTodo={removeTodo}
                           />)
                })
            }
        </ul>
    )
})

function TodoList() {
    const [todos, setTodos] = useState([])
    
    const addTodo = useCallback((todo) => {
        setTodos(todos => [...todos, todo])
    },[])
    
    const removeTodo = useCallback((id) => {
        setTodos( todos => todos.filter(todo => {
            return todo.id !== id
        }))
    }, [])
    
    const toggleTodo = useCallback((id) => {
        setTodos(todos => todos.map(todo => {
            return todo.id === id
                ? {
                 ...todo,
                 complete: !todo.complete
                }
             : todo
        }))
    }, [])
    
    // 读取的副作用必须在写入之前才不会永远是空数组
    useEffect(() => {
       const todos = JSON.parse(localStorage.getItem(LS_KEY) || '[]')
       setTodos(todos)
    },[])
    
    // 写入
    useEffect(() => {
        localStorage.setItem(LS_KEY, JSON.stringify(todos))
    }, [todos])
     
    return(
     <div className="todo-list">
            <Control addTodo={addTodo}/>
            <Todos removeTodo={removeTodo} toggleTodo={toggleTodo} todos={todos}/>
     </div>
    )
}

export default TodoList

最后编辑于：2020.07.11 01:54:23

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,458评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,454评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,171评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,062评论 0赞 207
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,440评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,661评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,906评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,609评论 0赞 200
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,379评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,600评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,085评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,409评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,072评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,088评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,860评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,704评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,608评论 2赞 270