javascript - react.js 中 props 和 state 的混淆

Question

我遵循了教程并得出了这个 https://jsbin.com/foxoxejilu/1/edit?js,output使用 react.js。

我对 Prop 和状态感到困惑。在Note组件的save方法中，这一行做了什么

this.props.onChange(this.refs.newText.value, this.props.id)

而且我在代码的其他地方没有看到 onChange 和 onRemove 函数，这是 React 的预构建函数吗？ React 如何知道 DOM 已更改或删除？

Answer 1

我们可以这样总结正在发生的事情:

一位家长 (Board) 将她的 child (Note) 打包成一个袋子 (props) 并放了一部手机 (onChange) 并说:如果你想告诉我一些事情，请给我发短信.然后过了一段时间， child 想“让我们给我的 parent 发短信”，所以 child 从他的属性(property)中取出电话并发短信给 parent :this.props.onChange("Thank you for sandwiches") . parent 随后收到消息并将其保存到她的笔记本中 (state):this.setState({notes})

这是 child 接收属性(props)的地方:

<Note key={note.id}
      id={note.id}
      onChange={this.update}
      onRemove={this.remove}>
      {note.note}
 </Note>

当上面找到通往 render() 的路时Board 的方法组件(通过 {this.state.notes.map(this.eachNote)} ，就像 Board 说，

• “嘿，让我们渲染 Note 组件并赋予它一些属性 (props)”。
• “让我们将其中一个 Prop 命名为 onChange，当它稍后被 Note 调用时，让我们执行我自己的名为 update 的方法”
• “我们可以随意调用此 Prop onChange，例如
  <Note ... fromParentWithLove={this.update}> ... </Note>，但我们将其命名为 onChange，以便更容易遵循我们的意图。”<

然后，我们可以移动到子组件 - Note . Note对自己说:

• “哇，如果有人点击保存按钮，让我们运行我自己的 save 方法:” <button onClick={this.save}>Save</button>
• “然后，在我的 save 方法中，让我们调用我的 parent onChange 通过 props 给我的 Board 函数”: this.props.onChange(this.refs.newText.value, this.props.id) "

作为引用，下面是从 JSBin 复制的代码:

var Note = React.createClass({
        getInitialState(){
            return {editing: false}
        },
        edit() {
            this.setState({editing: true})
        },
        save() {
            this.props.onChange(this.refs.newText.value, this.props.id)
            this.setState({editing: false})
        },
        remove() {
            this.props.onRemove(this.props.id)
        },
        renderForm() {
            return(
                <div className="note">
                    <textarea ref="newText"></textarea>
                    <button onClick={this.save}>Save</button>
                </div>
            )
        },
        renderDisplay() {
            return(
                <div className="note">
                    <p>{this.props.children}</p>
                    <span>
                        <button onClick={this.edit}>Edit</button>
                        <button onClick={this.remove}>X</button>
                    </span>
                </div>
            )
        },
        render() {
            return (this.state.editing) ? this.renderForm() : this.renderDisplay()
        }
    })

 var Board = React.createClass({
        propTypes: {
            count: function(props, propName) {
                if(typeof props[propName] !== 'number'){
                    return new Error('the count must be a number')
                }
            }
        },
        getInitialState() {
            return {
                notes: [
                {id:1, note:'Call boook'},
                {id:2, note:'Buy Something'},
                {id:3, note:'Wash Clothes'},
                {id:4, note:'Go Jogging'}
                ]
            }
        },
        update(newText, id){
            var notes = this.state.notes.map(
                note => (note.id !== id) ?
                    note:
                    {
                        ...note,
                        note:newText
                    }
            )
            this.setState({notes})
        },
        remove(id){
            var notes = this.state.notes.filter(note => note.id !== id)
            this.setState({notes})
        },
        eachNote(note) {
            return (<Note key={note.id}
                          id={note.id}
                          onChange={this.update}
                          onRemove={this.remove}>
                      {note.note}
                    </Note>)
        },
        render() {
            return (<div className='board'>
                       {this.state.notes.map(this.eachNote)}
                    </div>)
        }
    })

ReactDOM.render(<Board count={10}> </Board>, 
        document.getElementById('react-container'))