react学习笔记

2020-09-19

慕然回首, 学习Vue框架也已经两年了, 这两年里从学习写的小Dome到公司的项目, 从简单的但单页面到公司官网, H5项目, 在到小程序, 甚至还有它搞过几个简单的混合应用.

经过了这么久的相伴, 我也感觉到了Vue的一些局限, Vue自定义的语法指令很多, 需要查文档(比如Vue的filter, 我都是阅读别人源码的时候发现那种{* | *}写法, 然后去百度找了很久才知道, Vue文档也没咋详细说明), 而且也想着学习一下React换一种思维提升自己.

Start

首先呢, 还是要打开官网文档跟着写它的入门教程, 一个井字棋（tic-tac-toe）游戏, 跟着教程走完大概就能了解React的大概了

一切都是方法, 模块化
Facebook 开源的一个JavaScript库
特点：Declarative(声明式编码:只需要声明在哪里做什么，无需关心如何实现)；Component-Based(组件化编码)；高效-高效的DOM Diff算法，最小化页面重绘
单向数据流
TypeScript支持更成熟

新建一个React Item

1
2
3

npx create-react-app my-app
cd my-app
npm start

hello, world

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX语法

创建组件

import React from "react"

class Hello extends React.Component {
  render() {
    return (
      <h1> Hello, world! </h1>
    )
  }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('root')
)

数据传递

class Hello extends React.Component {
  render() {
    return (
      <h1>{this.props.value}</h1>
    )
  }
}
ReactDOM.render(
  <Hello value="Hello, world!" />,
  document.getElementById('root')
)

条件渲染

if (user) {
  return <h1>Hello, {user}!</h1>
}
return <h1>Hello, Stranger.</h1>

或者可以这样

let button
if (isLoggedIn) {
    button = <LogoutButton onClick={this.handleLogoutClick} />
  } else {
    button = <LoginButton onClick={this.handleLoginClick} />
  }

  return (
    <div>
      {button}
    </div>
  )

还可以这样

return (
  <div>
    {i > 0 && <p>{i}<p>}
    {j < 0 && <p>{j}<p>}
  </div>
)

生命周期 && state

props上的数据

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = { ...props }
  }
  // 挂载（mount）
  componentDidMount() { }
  // 卸载（unmount）
  componentWillUnmount() { }
}

然后我们通过 this.setState(Obejct)来实现视图的更新.

列表

const list = ['pig', 'dog', 'chicken']
render() {
  return (<ul>{
    names.map((name,index) => <p key={index}>I am {name}</p>)
  }</ul>)
}

表单

通过原生的change事件中的参数来获取到输入的内容

class NameForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(event) {
    this.setState({value: event.target.value})
  }
  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value)
    event.preventDefault()
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    )
  }
}

更多内容可以查看React表单文档

react生命周期

getDefaultProps // 初始化props属性，props来自其他组件
getInitialState // 初始化组件的状态
componentWillMount // 组件加载之前
render // 渲染
componentDidMount // 组件dom插入之后
componentWillReceiveProps // 接受父组件的传递
shouldComponentUpdate // 组件的更新处罚
componentWillUpdate // 组件要更新前
componentDidUpdate // 组件更新后
componentWillUnmount // 组件的销毁

Mounting : 挂载阶段

Updating: 运行时阶段

Unmounting: 卸载阶段

Error Handling: 错误处理

Todo Doem

import React, { useState } from "react"

class addItem extends React.Component {
  constructor(props) {
    super(props)
    this.addItem = props.addItem
    this.state = {value: ''}
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(event) {
    this.setState({value: event.target.value})
  },
  handleSubmit() {
    this.addItem(this.state.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <input type="submit" value="Add Task" />
      </form>
    )
  }
}


class Item extends React.Component {
  constructor(props) {
    super(props)
    this.handleDelete = props.handleDelete
    this.state = { ...props.item }
  }
  render() {
    return (
      <li onClick={()=>this.handleDelete(this.state.index)}>{this.state.item}</li>
    )
  }
}

const App = () => {
  const [ list, setList ] = useState([])
  const addItem = item => setList([...list, item])
  const removeItem = index => setList([
      ...list.splice(0, index),
      ...list.splice(index + 1)
    ])

  return (
    <div>
    <addItem addItem={addItem} />
      <ul>{
        list.map((item, index)=>(
          <Item key={index} item={{ index, item }} handleDelete={removeItem} />
        ))
      }</ul>
    </div>
  )
}