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>
)