React 工程化开发

export default function App() {
  return <div>Hello World</div>
}

import React from 'react'

class HelloWorld extends React.Component {
  // 1.构造方法: constructor
  constructor() {
    console.log('HelloWorld constructor')
    super()

    this.state = {
      message: 'Hello World',
    }
  }

  changeText() {
    this.setState({ message: '你好啊, React' })
  }

  // 2.执行render函数
  render() {
    console.log('HelloWorld render')
    const { message } = this.state

    return (
      <div>
        <h2>{message}</h2>
        <p>{message}是程序员的第一个代码!</p>
        <button onClick={(e) => this.changeText()}>修改文本</button>
      </div>
    )
  }

  // 3.组件被渲染到DOM: 被挂载到DOM
  componentDidMount() {
    console.log('HelloWorld componentDidMount')
  }

  // 4.组件的DOM被更新完成： DOM发生更新
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(
      'HelloWorld componentDidUpdate:',
      prevProps,
      prevState,
      snapshot
    )
  }

  // 5.组件从DOM中卸载掉： 从DOM移除掉
  componentWillUnmount() {
    console.log('HelloWorld componentWillUnmount')
  }

  // 不常用的生命周期补充
  shouldComponentUpdate() {
    return true
  }

  getSnapshotBeforeUpdate() {
    console.log('getSnapshotBeforeUpdate')
    return {
      scrollPosition: 1000,
    }
  }
}

export default HelloWorld

// 父组件
export class App extends Component {
  render() {
    const btn = <button>按钮2</button>

    return (
      <div>
        {/* 1.使用children实现插槽 */}
        <NavBar>
          <button>按钮</button>
          <h2>哈哈哈</h2>
          <i>斜体文本</i>
        </NavBar>

        {/* 2.使用props实现插槽 */}
        <NavBarTwo
          leftSlot={btn}
          centerSlot={<h2>呵呵呵</h2>}
          rightSlot={<i>斜体2</i>}
        />
      </div>
    )
  }
}

// 子组件: 第一种 使用children实现插槽
export class NavBar extends Component {
  render() {
    const { children } = this.props
    console.log(children)

    return (
      <div className="nav-bar">
        <div className="left">{children[0]}</div>
        <div className="center">{children[1]}</div>
        <div className="right">{children[2]}</div>
      </div>
    )
  }
}

// 子组件: 第二种 直接通过 props 属性传递
export class NavBarTwo extends Component {
  render() {
    const { leftSlot, centerSlot, rightSlot } = this.props

    return (
      <div className="nav-bar">
        <div className="left">{leftSlot}</div>
        <div className="center">{centerSlot}</div>
        <div className="right">{rightSlot}</div>
      </div>
    )
  }
}

// 父组件
export class App extends Component {
  constructor() {
    super()

    this.state = {
      titles: ['流行', '新款', '精选'],
      tabIndex: 0,
    }
  }

  tabClick(tabIndex) {
    this.setState({ tabIndex })
  }

  getTabItem(item) {
    if (item === '流行') {
      return <span>{item}</span>
    } else if (item === '新款') {
      return <button>{item}</button>
    } else {
      return <i>{item}</i>
    }
  }

  render() {
    const { titles, tabIndex } = this.state

    return (
      <div className="app">
        <TabControl
          titles={titles}
          tabClick={(i) => this.tabClick(i)}
          // itemType={item => <button>{item}</button>}
          itemType={(item) => this.getTabItem(item)}
        />
        <h1>{titles[tabIndex]}</h1>
      </div>
    )
  }
}

// 子组件
export class TabControl extends Component {
  constructor() {
    super()

    this.state = {
      currentIndex: 0,
    }
  }

  itemClick(index) {
    // 1.自己保存最新的index
    this.setState({ currentIndex: index })

    // 2.让父组件执行对应的函数
    this.props.tabClick(index)
  }

  render() {
    const { titles, itemType } = this.props // 父组件传递过来的数据
    const { currentIndex } = this.state

    return (
      <div className="tab-control">
        {titles.map((item, index) => {
          return (
            <div
              className={`item ${index === currentIndex ? 'active' : ''}`}
              key={item}
              onClick={(e) => this.itemClick(index)}
            >
              {/* <span className='text'>{item}</span> */}
              {itemType(item)}
            </div>
          )
        })}
      </div>
    )
  }
}

// 类组件
export class Bar extends PureComponent {
  render() {
    return (
      <div>PureComponent优化渲染</div></div>
    )
  }
}

// 函数组件
import { memo } from 'react'

const Profile = memo(function (props) {
  console.log('profile render')
  return <h2>Profile: {props.message}</h2>
})

export default Profile

// 数据不可变性
changeCount(index) {
  // this.state.data[index].count++
  const data = [...this.state.data]
  data[index].count++
  this.setState({ data: data }) // 请注意,这里的俩者堆内存不一致可以进行更新
}

// 获取 DOM 元素属性
import React, { PureComponent, createRef } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.titleRef = createRef() // 需要用到 createRef()
    this.titleEl = null
  }

  getNativeDOM() {
    // 1.方式一: 在React元素上绑定一个ref字符串
    console.log(this.refs.someString)

    // 2.方式二: 提前创建好ref对象, createRef(), 将创建出来的对象绑定到元素
    console.log(this.titleRef.current)

    // 3.方式三: 传入一个回调函数, 在对应的元素被渲染之后, 回调函数被执行, 并且将元素传入
    console.log(this.titleEl)
  }

  render() {
    return (
      <div>
        <h2 ref="someString">方式一：字符串形式获取</h2>
        <h2 ref={this.titleRef}>
          方式二： ref 对象形式获取,利用 current 进行调用
        </h2>
        <h2 ref={(el) => (this.titleEl = el)}>方式三：回调函数形式获取</h2>

        <button onClick={(e) => this.getNativeDOM()}>获取DOM</button>
      </div>
    )
  }
}

// 获取 class 组件
import React, { PureComponent, createRef } from 'react'

class SonComponent extends PureComponent {
  testFunc() {
    console.log('test------')
  }
  render() {
    return <h1>子组件</h1>
  }
}

export class App extends PureComponent {
  constructor() {
    super()
    this.someString = createRef() // 先定义ref
  }

  getComponent() {
    console.log(this.someString.current)
    this.someString.current.testFunc() // 获取子组件上的属性方法
  }

  render() {
    return (
      <div>
        <SonComponent ref={this.someString} />
        <button onClick={(e) => this.getComponent()}>获取组件实例</button>
      </div>
    )
  }
}
export default App

// 在函数组件上获取 DOM
import React, { PureComponent, createRef, forwardRef } from 'react'

const FuncSonComponent = forwardRef(function (props, ref) {
  return (
    <div>
      <h1 ref={ref}>函数子组件</h1>
    </div>
  )
})

export class App extends PureComponent {
  constructor() {
    super()
    this.someString = createRef() // 先定义ref
  }

  getComponent() {
    console.log(this.someString.current) // 获取子组件上的 DOM 节点
  }

  render() {
    return (
      <div>
        <FuncSonComponent ref={this.someString} />
        <button onClick={(e) => this.getComponent()}>获取函数子组件实例</button>
      </div>
    )
  }
}

export default App

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      inputValue: '', // input 中的初始值
    }
  }

  inputChange(event) {
    // 监听 input 中键入的事件变化
    console.log('inputChange:', event.target.value)
    this.setState({ inputValue: event.target.value })
  }

  render() {
    const { inputValue } = this.state

    return (
      <div>
        {/* 受控组件 */}
        <input
          type="checkbox"
          value={inputValue}
          onChange={(e) => this.inputChange(e)}
        />

        {/* 非受控组件 */}
        <input type="text" />

        <h2>inputValue输入值: {inputValue}</h2>
      </div>
    )
  }
}

// 在 React 中
class App extends React.Component {
  constructor() {
    super()

    this.state = {
      MultilineMessage: '',
    }
  }

  handleChange(event) {
    // 监听 input 中键入的事件变化
    const targetObj = event.target.name // 获取目标 input 的 name 属性，即 <textarea> 的 name="MultilineMessage"
    this.setState({ [targetObj]: event.target.value }) // 动态更新对应 state，等价于 { MultilineMessage: event.target.value }
  }

  handleSubmit(event) {
    event.preventDefault() // 1.阻止默认的行为 防止刷新
    console.log('点击提交处理', this.state.MultilineMessage)
  }

  render() {
    return (
      <form onSubmit={(e) => this.handleSubmit(e)}>
        <label>
          Essay:
          <textarea
            name="MultilineMessage"
            value={this.state.MultilineMessage}
            onChange={(e) => this.handleChange(e)}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isAgree: false,
      hobbies: [
        { value: 'sing', text: '唱', isChecked: false },
        { value: 'dance', text: '跳', isChecked: false },
        { value: 'rap', text: 'rap', isChecked: false },
      ],
    }
  }

  handleAgreeChange(event) {
    this.setState({ isAgree: event.target.checked })
  }

  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = event.target.checked
    this.setState({ hobbies: hobbies })
  }

  render() {
    const { hobbies } = this.state
    return (
      <div>
        {/* 在 React 中 checkbox 单选 */}
        <label htmlFor="agree">
          <input
            id="agree"
            type="checkbox"
            checked={isAgree}
            onChange={(e) => this.handleAgreeChange(e)}
          />
          同意协议
        </label>

        {/* 在 React 中 checkbox 多选 */}
        <div>
          您的爱好:
          {hobbies.map((item, index) => {
            return (
              <label htmlFor={item.value} key={item.value}>
                <input
                  type="checkbox"
                  id={item.value}
                  checked={item.isChecked}
                  onChange={(e) => this.handleHobbiesChange(e, index)}
                />
                <span>{item.text}</span>
              </label>
            )
          })}
        </div>
      </div>
    )
  }
}

// 在 React 的选择器
<select value={fruit} onChange={(e) => this.handleFruitChange(e)}>
  <option value="apple">苹果</option>
  <option value="orange">橘子</option>
  <option value="banana">香蕉</option>
</select>

<div>
  <button type='submit'>注册</button>
</div>

// 在 React 的选择器 多选
handleFruitChange(event) {
  const options = Array.from(event.target.selectedOptions);
  const values = options.map((item) => item.value);
  this.setState({ fruit: values });

  // 额外补充: Array.from(可迭代对象)
  // Array.from(arguments) 可传第二个回调函数, 效果等同于上面
  // const values2 = Array.from(
  //   event.target.selectedOptions,
  //   (item) => item.value
  // );
}

// render 函数
<select value={fruit} onChange={(e) => this.handleFruitChange(e)} multiple>
  <option value="apple">苹果</option>
  <option value="orange">橘子</option>
  <option value="banana">香蕉</option>
</select>

<div>
  <button type='submit'>注册</button>
</div>