huzidaha / react-naive-book-examples Goto Github PK

可以将多次 dispatch 在某个时间段合并成一个操作
`function createStore(s,stateChanger) {
const listeners = []
const queue = []
let state = s
const getState = () => state
let timerId :any = 0
const dispatch = (action) => {
console.log(action)
if(typeof action == 'function') {
const d = stateChanger(state,action())
for(const value of listeners) {
value(d)
state = d
}
return;
}
queue.push(() => {
return stateChanger(state,action)
})

    clearImmediate(timerId)
    timerId = setImmediate (() => {
        let d = null
        while (queue.length) {
            d = queue.shift()()
            state = d
        }
        for(const value of listeners) {
            value(d)
        }
    },1)
}
const subscribe = (listen) => listeners.push(listen)
return { getState,dispatch,subscribe }

}`

首先非常感谢你的教程！！

我按照你说的一步步来的时候，只是把commnet unshift到列表里面，因为我想按时间倒序排列评论。

结果出现了最新插入的那一条的时间是上一条的时间，页面5秒之后刷新才会显示正确的时间。

而且我打印log到控制台，更诡异了，出现的却是comments列表的最后一条，而不是我新插入的那条（但是界面却更新了），请问这个是怎么回事？谢谢

上面这段话在友言里面有敏感字，也是醉了

我录了截图：

CommnetInput>handleSubmit()中，建议加上一句判断，如果用户名为空，则除了提示输入用户名之外，应该保留内容，这样应该更符合实际。

`` handleSubmit () {
if (this.props.onSubmit) {
const user = this.state.user
const content = this.state.content
// const { user, content } = this.state
this.props.onSubmit({ user, content })
}
if (!this.state.user)
return//如果用户名为空，则到此返回
this.setState ({ content:"" })
}

不知道为什么我这边的CommentInput从localStorage获取出来的username无法更新当前的state，现在是直接在初始化的时候从localStore取得赋值给state.username

我刚刚学react，看见您写的小书对我帮助很大。感谢
function createStore(s,stateChanger) {
const listeners = []
const queue = []
let state = s
const getState = () => state
let timerId :any = 0
const dispatch = (action) => {
if(typeof action == 'function') {
const d = stateChanger(state,action())
for(const value of listeners) {
value(d)
state = d
}
return;
}
queue.push(() => {
return stateChanger(state,action)
})
clearImmediate(timerId)
timerId = setImmediate (() => {
let d = null
while (queue.length) {
d = queue.shift()()
state = d
}
for(const value of listeners) {
value(d)
}
},1)
}
const subscribe = (listen) => listeners.push(listen)
return { getState,dispatch,subscribe }
}

在comments.js中

   case DELETE_COMMENT:
      // 删除评论
      return {
        comments: [
          ...state.comments.slice(0, action.commentIndex),
          ...state.comments.slice(action.commentIndex + 1)
        ]
      }

改为

    case DELETE_COMMENT:
      //删除评论，记住 index！
      // console.log(state.comments,222222222)
      let aa=state.comments.slice(0,action.commentIndex)
      let bb=state.comments.slice(action.commentIndex+1)
      return {
          comments: [
            ...aa,
            ...bb
          ]

        }

就不会报错了，不知道为什么，请赐教

这个教程已经两年多了，现在的React版本中，PropTypes独立出一个模块，旧代码中如果不改变引入方式将会报错。建议后来的读者可以参考一下：
ReactJS “TypeError: Cannot read property 'array' of undefined”

_getProcessedContent(content){
return content
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'")
.replace(/([\S\s]+?)/g, '$1')
}
加了断点，代码也运行到return了，但是就是没有加上code，这是怎么回事呢