本文共 2098 字，大约阅读时间需要 6 分钟。

1、无状态state，function组件

import React, { Component } from 'react'import ChildTest from './test'function Test(props) {  return (    
   
      
        
   
  )}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 (      
   
            {camera}      
   
    )  }}

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 
   
    
     {      setCount(count + 1)    }}>+    {count}    
     {      setCount(count - 1)    }}>-    
     {      setName('小明')    }}>+    {name}    
     {      setName('小刚')    }}>-  
   
}context.jsimport 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 (    
         
        
     )}export default Test子组件import PersonalContext from './context';var context = useContext(PersonalContext) return (    
   
    {context.age}
   
  )

转载地址：http://memsi.baihongyu.com/