react_1

react 轻量级的视图层的数据驱动框架(MVC)

2013年5月react开源,2013年4月vue在github提交第一行代码

react模板语法：jsx( js表达式加{} )

react优势：

1. 语法灵活接近底层
2. 社区完善

vue优势:

1. 使用简单

虚拟DOM(react率先使用),提高性能,开发原生组件成为可能

使用

npm install -g create-react-app

create-react-app 1722react

运行

1. cd到要运行的目录
2. yarn start

render函数

写组件必须写render函数(生命周期函数,帮助渲染页面,决定页面显示内容),render必须写return

import React from ‘react‘   

export default class App extends React.Component {
  render() {
    return (
      <div>hello world</div>
    )
  }
}

constructor是类在被创建的时候第一个执行的函数

constructor(props) {
    super(props)          //将props传给他的父类React.Component
    this.state = {        //定义初始数据state是固定写法
    inputValue: "",
    list: []
   }
  this.handleChange = this.handleChange.bind(this)  //react会有this指向问题(放constructor会提升组件的性能)
}

语法

1. 绑定事件：

   <input type="text" onChange={this.handleChange} />   //得改变this指向

2. 循环：

   <ul>
     {
   this.state.list.map((value, index) => {
     return <li key={index}>{value}</li>
   })
     }
   </ul>

修改数据

不能直接修改要用setState方法

handleChange(e) {
  this.setState({
    inputValue: e.target.value
  })
}

handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue]
      //...展开旧数组变成一个新数组,新增新内容this.state.inputValue
    })
  }

传值

子组件向父组件传值,子组件调用父组件传递过来的方法来实现
父组件向子组件传值通过属性

webapp/app

webapp:手机网页,通过网址的形式打开
app:原生移动应用

react单向数据流

父组件可以改变子组件,子组件不可以直接改变父组件
子组件改变父组件,子组件调用父组件传递过来的方法来实现
父组件改变子组件通过属性

设计模式是由面向对象

组件是由元素组成的

react

jsx注释{/----/}
className
htmlFor