React初学项目——简易留言板

留言板实现增删改（无样式）

这个ReactJs的简易留言板，结构简单，使用的是create-react-app脚手架程序。

主要演示了以下知识点：

1、组件，事件；

2、单向数据流；

3、列表和条件渲染；

4、受控元素；

5、.map()方法。

很适合ReactJs初学者掌握react基本原理，几下就能做出效果，很有成就感。

效果
无内容时显示暂无留言，如下图：

有留言内容时 出现清空按钮，并可以对所展示的留言进行删除和修改，简易留言板修改的内容是写死的，如下图：

修改后 “你好” 修改为 “Hello”,如下图：

相关知识点

事件
事件绑定

<JSX元素 onClick={
   this.实例方法|函数体}

修正this

this.方法=()=>{
   箭头函数定义方法}

事件对象

实例方法(ev)	ev 代理事件对象 ev.target 返回虚拟Vdom 

组件状态
定义

//es6+ 
//实例属性: state    
class App{
   state:value}

使用

//获取
this.state.proname

//修改
this.setState(对象)  //浅合并state

this.setState((prevState,prevProps)=>{
   
  //一般是用于在setState之前做一些操作,this.state==prevState==修改之前的state
  return {
   
    sname:value
  }
}) 

this.setState({
   
  sname:value
}, () => {
   
  //一般是用于在setState之后做一些操作  this.state==修改之后的state
})

setState是异步的

列表渲染

this.props|state.属性名.map(function(val,index){
   
  return html
})

条件渲染

//表达式渲染
this.state|props.proname ? jsx1