从0到1学习react(二)

1. state与setState

    this.state = {
      username:'',
      content:''
    }

我定义了state也更新了为什么数据没同步呀？咋回事儿啊小老弟，就是不让我好好写写代码呗？

于是自己去google了一下，明白了，记录一下自己看的 alexzhong22c.github.io/2018/01/15/… 知乎：zhuanlan.zhihu.com/p/25954470 还有一个博文，地址我找不到了，如果发现就在评论里说一下

1. setState不会立刻改变React组件中state的值；
2. setState通过引发一次组件的更新过程来引发重新绘制；
3. 多次setState函数调用产生的效果会合并。 这个地方我还要学习一下，暂时先记录一下。

2.父子间的通信，兄弟之间的通信

taobaofed.org/blog/2016/1… 写的实在是很实用 下面是自己实践代码 CommentApp

import React,{Component} from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'
import '../css/index.css'
class CommentApp extends Component{
  constructor(){
    super()
    this.state ={
      commentArr:[]
    }
  }
  handleSubmitComment(comment){
    this.setState({commentArr: this.state.commentArr.concat([comment])},
      (preState,props)=>{
      console.log(this.state.commentArr)
    })

  }
  render() {
    return(
      <div className="comment-wrap">
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)}/>
        <CommentList commentArr={this.state.commentArr}/>
      </div>
    )
  }
}
export default CommentApp

commentInput

import React,{Component} from 'react'
class CommentInput extends Component{
  constructor(){
    super()
    this.state = {
      username:'',
      content:''
    }
  }
  handleUserNameController(e) {
    this.setState({
      username:e.target.value
    })
  }
  handleUserContentController(e) {
    this.setState({
      content:e.target.value
    })
  }
  handleSubmit(){
    if(this.props.onSubmit){
      const {username,content} = this.state;
      this.props.onSubmit({username,content})
    }
    this.setState({content:''})
  }
  render() {
    return (
      <div>
        <div className="comment-name">
          <span>你的昵称：</span>
          <input type="text" value={this.state.username} onChange={this.handleUserNameController.bind(this)}/>
        </div>
        <div className='comment-content'>
          <span>评论内容：</span>
          <textarea name="" id="" cols="60" rows="10" value={this.state.content} onChange={this.handleUserContentController.bind(this)}/>
        </div>
        <div className='comment-input-button'>
          <button onClick={this.handleSubmit.bind(this)}> 发布</button>
        </div>
      </div>
    );
  }
}
export default CommentInput

comment

import React,{Component} from 'react'
class Comment extends Component{
  constructor() {
    super()
  }
  componentDidUpdate(){
    console.log(this.props.commentArr)
    let arr = [];
    arr = this.props.commentArr;
  }
  render() {
    return(
    <div className="comment-list">
      {this.props.commentArr.map((comment,i)=>{
        return(
           <div key={i}>
             <span>{comment.username}</span>
             <p>{comment.content}</p>
           </div>
        )

      })}

    </div>
  )
  }
}
export default Comment

commentList

import React,{Component} from 'react'
import Comment from "./Comment"
 class CommentList extends Component{
   render() {
     return (
       <div>
         <Comment{...this.props}/>
       </div>
     );
   }
 }
 export default CommentList

通过这几个组件，我学习了state与setState,这几个组件之间实现了父--->子，子--->父，父--->子--->子，兄弟之间的通信