IAmor

# React - 01

# 项目目录

和Vue没啥太大区别，pass

# Hello Word

React还是很有趣的，可以将页面的每一个部分进行拆分组件，灵活的进行拼装，通过挂载的方式进行绑定插入。

虽然Vue，Ng也可以进行类似这种，但还是没有React灵活

 ReactDom.render(<App/>,document.getElementById('app'))

圆规正传，开始Hello Word，首先随便整个js

import React, {Component} from 'react'

class Demo extend Component {
    render({
    
        return (
            // 使用JSX
            <div>Hello Word</div>
        )
    })
}
exprot default Demo

挂载上去，齐活

# 进阶案例

故事背景：一个妹子开了一家按摩店，给大家提供服务。

# 基础按摩店

//Sister.js


import React, {Component} from 'react'

class Sister extend Component {
    render({
    
        return (
            <div>
                <input/>
                <button>加钟</button>
            /div>
            <ul>
                 <li>肉蛋从机</li>
                 <li>拉交叉肉</li>
            </ul>
        ) 
    })
}
exprot default Sister

每一个组件的render函数中，最外层都需要有div的包裹，和Vue一样，但是如果父组件对子组件进行flex布局，则凉凉，所以需要引入新的模块来解决，==Fragment==

import React, {Component, ==Fragment==} from 'react'

JSX创建虚拟Dom，开发中避免对Dom的直接操作

以上，一个妹子的按摩店开起来了。但是没有办法加钟。

# 加钟进阶

我们都知道，Vue在开发之初，借鉴了React的优良传统，以数据为驱动。

  1. 定义数据
constract (props) {
    super(props)
    this.state = {
        inputValue: ''.
        list: [1, 2]
    }
}
  1. 数据的绑定
<input value={this.state.inputValue}/>

JSX中遇到‘<’解析为html，遇到‘{’解析为js

<ul>
    {this.state.list.map(item,index) => {
        retuen <li key={item + index}>{item}</li>
    }}                 
</ul>

key 和Vue，Diff算法的核心玩意，不写出Warning

  1. 事件的绑定

函数可以直接写，与render同级

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>

render({})

inputChange (e) {
    this.setData({
        inputValue: e.target.value
    })
}

与原生js不同的是，React事件驼峰

事件的this指向undefined，需要绑定时使用bind进行改变，还可以通过箭头函数

onClick={() => this.remove(index)}

改变数据时，和微信小程序一样，只能通过setData来进行改变，不能直接赋值

target 当前触发元素 currentTarget 当前绑定元素

所以小姐姐的按摩店搞定，看成品

import React, {Component, Fragment} from 'react'
class Sister extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: ['头保护', '精油item的']
    }
  }
  render() {
    return (
      <Fragment>
        <div>
          <input type="text" value={this.state.inputValue} onChange={this.inputChange}/>
          <button onClick={this.add.bind(this)}>ADD</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li key={index + item}>{item}</li>
            })
          }
        </ul>
      </Fragment>
    )
  }
  inputChange = (e) => {
    this.setState(
      {
        inputValue: e.target.value
      }
    )
  }
  add =  () => {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
}
export default Sister

← React - 02 →