react 创建界面的2种常见方式以及react hooks

1、无状态state，function组件

import React, { Component } from 'react'
import ChildTest from './test'

function Test(props) {
  return (
    <div className="safe-wrap">
      <ChildTest camera="测试"></ChildTest>
    </div>
  )
}

export default Test

2、es6 Class

import React, { Component } from 'react'

class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      camera: '相机'
    }
  }
  componentWillMount()
  componentDidMount() { }
  componentWillUnmount()
  
  shouldComponentUpdate()
  

  render() {
    const { camera } = this.state
    return (
      <div className="safe-wrap">
        {camera}
      </div>
    )
  }
}

3、react Hooks

1）.useState 、userEffect. 

const [state, setState] = useState(initialState);

参数： initialState 可以直接是当前state的初始值，也可以是一个函数，函数的返回值将作为state的值，参数只会在组件的初始渲染中起作用

返回值：返回的是一个数组，一个是当前state的值，另一个是更新state的方法，这里面setState方法与class中的setState不同在于，此setState 不会合并state 中的值

如果需要定义多个state 只需要多次调用useState 方法就行。

 

useEffect方法是在每次渲染之后执行，可以理解为class写法中的 componentDidMount / componentDidUpdate（为了方便理解可以这么理解，但不完全一样）

useEffect(didUpdate);

参数：function，在每次渲染之后执行，在函数里可以编写更新dom ，添加订阅 等。

参数返回值： function(可以不返回) 如果 didUpdate函数中返回了一个函数，这个函数会在组件卸载前执行(每次渲染都会执行)需要清除上次订阅的内容可以再这里面写。

执行条件： useEffect 的第二个参数是一个数组，只有当数组中的的值发生改变的时候才会调用effect，如果执行在第一次挂载和卸载的时候调用，只需要传一个[]空数组

 

mport React, { useState, useEffect } from 'react'

function Test() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('小红')

  useEffect(function () {
    console.log('社会我东哥')
  }, [name, count])

  return <div className="safe-wrap">
    <button onClick={() => {
      setCount(count + 1)
    }}>+</button>
    {count}
    <button onClick={() => {
      setCount(count - 1)
    }}>-</button>


    <button onClick={() => {
      setName('小明')
    }}>+</button>
    {name}
    <button onClick={() => {
      setName('小刚')
    }}>-</button>
  </div>
}

context.js

import react, { createContext } from 'react';
export default react.createContext(null);
import PersonalContext from './context';

父组件
import React, { Component, useState, useEffect, useContext } from 'react'
import './index.scss'
import PersonalContext from './context';
import Parent from './parent'
function Test(props) {
  return (
    <PersonalContext.Provider value={{ age: 1 }}>
      <Parent />
    </PersonalContext.Provider>
  )
}

export default Test

子组件
import PersonalContext from './context';
var context = useContext(PersonalContext)
 return (
    <div className="parent">{context.age}</div>
  )