react基础

安装

bash 复制代码
create-react-app myapp
cd myapp
npm syart
javascript 复制代码
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;
类组件 ClassCom
生命周期-初始化阶段
1、constructor 先执行
  • 初始化state,拦截路由参数
  • 防抖、节流
2、getDerivedStateFromProps执行
  • 静态函数,纯函数来用
  • 传入props和state,返回值将和之间的state合并,作为新的state
javascript 复制代码
static getDerivedStateFromProps(props, state) {
	console.log('getDerivedStateFromProps')
	return {
		nameList: props.name.split('')
	}
}
3、componentWillMount

UNSAFE_componentWillMount

  • 渲染之前执行
  • 如果有了getDerivedStateFromProps或者getSnapshotBeforeUpdate生命周期,则不执行componentWillMount
4、render
5、componentDidMount 执行

生命周期-更新阶段
1、componentWillReceiveProps
  • 如果组件已经有了getDerivedStateFormProps则不会执行componentWillReceiveProps
    • 有一些数据,props发生改变的时候,props的改变来决定state是否更新
2、getDerivedStateFromProps
3、shouldComponentUpdate
javascript 复制代码
    shouldComponentUpdate() {
      return true;
    }
  • 相当于一个拦截器,返回一个 boolean,来决定组件要不要更新
4、componentWillUpdate
  • 获取组件更新的一些状态,dom的位置
5、render
  • createElement
6、getSnapshotBeforeUpdate
  • 获取更新前的快照
  • commitBeforeMutationLifeCycle
7、componentDidUpdate
  • 是不能调用setState ,否则会死循环

生命周期-销毁阶段
componentWillUnmount

* 改变界面,要用 state 。调用 setState 的方法去处理。
javascript 复制代码
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>
    )
  }
}
函数组件 FuncCom
useState
[state,dispatch] = useState(initState)
- state :作为组件状态,提供ui渲染视图
- dispatch :用户修改state的方法,同时触发组件更新
- initState :初始值
javascript 复制代码
const [funcName , setFuncName] = useState(()=>'initName')
const handleClick = ()=>{
	//setFuncName('newName')
	setFuncName(()=>'newName')
}
javascript 复制代码
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>
  )
}
useEffect
javascript 复制代码
//处理副作用
useEffect(()=>destory,deps)
- ()=>destory,即callback,第一个参数,是一个函数
- destory作为callback的返回值,在下一次callback执行前调用
- deps 第二个参数,是一个数组,数组的值发生改变,执行上一次的destory,并再次执行callback
javascript 复制代码
useEffect(()=>{
	console.log('callback')
	return ()=>{
		console.log('destory')
	}
},[])
相关推荐
小牛itbull2 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet13 小时前
那总结下来,react就是落后了
前端·react.js
王解16 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js