react_1

Posted 2020-10-21 lhh-bky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react_1相关的知识，希望对你有一定的参考价值。

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

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

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

react优势：

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

vue优势:

使用简单

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

使用

npm install -g create-react-app

create-react-app 1722react

运行

cd到要运行的目录
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会提升组件的性能)
}

语法

绑定事件：

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

循环：

<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
    })
  }