react基础

安装

create-react-app myapp
cd myapp
npm syart
1
2
3

import { useState } from 'react';
function App() {

  // 返回一个数组，第一个值是state, 第二个值修改 state 的方法
  const [ classComName, setClassComName ] = useState(() => 'cc');

  const handleClick = (res) => {
    setClassComName(() => res)
  }

  return (
    <div className="App">
      <ClassCom name={classComName} onClick={handleClick} />
      <FuncCom />
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

类组件 ClassCom

生命周期-初始化阶段

1、constructor 先执行

• 初始化state，拦截路由参数
• 防抖、节流

2、getDerivedStateFromProps执行

• 静态函数，纯函数来用
• 传入props和state，返回值将和之间的state合并，作为新的state

static getDerivedStateFromProps(props, state) {
	console.log('getDerivedStateFromProps')
	return {
		nameList: props.name.split('')
	}
}
1
2
3
4
5
6

3、componentWillMount

UNSAFE_componentWillMount

• 渲染之前执行
• 如果有了getDerivedStateFromProps或者getSnapshotBeforeUpdate生命周期，则不执行componentWillMount

4、render

5、componentDidMount 执行

---

生命周期-更新阶段

1、componentWillReceiveProps

• 如果组件已经有了getDerivedStateFormProps则不会执行componentWillReceiveProps
  • 有一些数据，props发生改变的时候，props的改变来决定state是否更新

2、getDerivedStateFromProps

3、shouldComponentUpdate

    shouldComponentUpdate() {
      return true;
    }
1
2
3

• 相当于一个拦截器，返回一个 boolean，来决定组件要不要更新

4、componentWillUpdate

• 获取组件更新的一些状态，dom的位置

5、render

• createElement

6、getSnapshotBeforeUpdate

• 获取更新前的快照
• commitBeforeMutationLifeCycle

7、componentDidUpdate

• 是不能调用setState ，否则会死循环

---

生命周期-销毁阶段

componentWillUnmount

---

* 改变界面，要用 state 。调用 setState 的方法去处理。
1

export default class ClassCom extends Component {

    constructor(props) {
        super(props);

        this.state = {
            number: 0,
            msg: 'hello aaa',
            nameList: [],
        }
    }
	
    // static getDerivedStateFromProps(props, state) {
    //   console.log('getDerivedStateFromProps')
    //  return {
    //   nameList: props.name.split('')
    //  }
    // }
	
	handleClickFn = function(){
		//省略代码，此处只是为了区分和箭头函数的区别，作用域不同，传参的时候，需要改变this指向
	}

    handleClick = (type) => {
        console.log('click', type)
        this.setState({
            number: this.state.number + ( type === 'plus' ? 1 : -1),
        })
    }

    handleChange = (event) => {
        this.setState({
            msg: event.target.value
        })
    }

    

  render() {
    const { msg, number, nameList } = this.state;
    const { name, onClick } = this.props;
    return (
      <div>
      	{this.xxx}
        <div>{name}--{number}</div>
        <div>
          {nameList.map(item => <div key={item}>{item}</div>)}
        </div>
        <button onClick={() => { this.handleClick('plus') }}>+</button>
        <button onClick={() => { this.handleClick('minus') }}>-</button>
        <input value={msg} onChange={this.handleChange} />
        {/* 子组件往父组件传值 */}
        <button onClick={() => { onClick('父组件res') }} >父组件响应</button>
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

函数组件 FuncCom

useState
[state，dispatch] = useState(initState)
- state ：作为组件状态，提供ui渲染视图
- dispatch ：用户修改state的方法，同时触发组件更新
- initState ：初始值
1
2
3
4
5

const [funcName , setFuncName] = useState(()=>'initName')
const handleClick = ()=>{
	//setFuncName('newName')
	setFuncName(()=>'newName')
}
1
2
3
4
5

export default function FuncCom() {

  const [ number, setNumber ] = useState(0);
  const [ msg, setMsg ] = useState('hello luyi');
  const [ list, setList ] = useState([]);

  return (
    <div>
        <div>函数组件--{number}</div>
        <button onClick={() => { setNumber(number + 1) }}>+</button>
        <button onClick={() => { setNumber(number - 1) }}>-</button>
        <input value={msg} onChange={(e) => setMsg(e.target.value)} />
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

useEffect

//处理副作用
useEffect(()=>destory,deps)
- ()=>destory,即callback，第一个参数，是一个函数
- destory作为callback的返回值，在下一次callback执行前调用
- deps 第二个参数，是一个数组，数组的值发生改变，执行上一次的destory，并再次执行callback
1
2
3
4
5

useEffect(()=>{
	console.log('callback')
	return ()=>{
		console.log('destory')
	}
},[])
1
2
3
4
5
6