react 基础语法

react 基础语法

MVC框架(数据层，视图层，控制层)

对比mvvm
 MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。

环境搭建

安装脚手架create-react-app。

cnpm install -g create-react-app

创建项目

create-react-app reactapp [--typescript]   (项目名不能大写)

特点

• 声明式编程

react依赖

jsx语法

1、由HTML元素构成
2、中间如果需要插入变量用{}
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容
6. 组件首字母大写
7. jsx中还能嵌套jsx

生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这生命周期中，我们有许多可以调用的事件，也俗称为钩子函数

类组件

生命周期的3个状态：
Mounting:将组件插入到DOM中

Updating:将数据更新到DOM中

Unmounting:将组件移除DOM中

生命周期中的钩子函数（方法，事件）

compontWillMount :组件将要渲染，

compontDidMount:组件渲染完毕,ajax，添加动画前的类

compontWillReceiveProps:组件将要接受props数据，查看接收props的数据什么

shouldComponentUpdate：组件接收到新的state或者props,判断是否更新。返回布尔值

compontWillUpdate:组件将要更新

componentDidUpdate:组件已经更新

componentwillUnmount:组件将要卸载，清除定时器

函数组件

依靠hook来模拟生命周期
具体参看hooks文章 链接

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {      // 清除副作用( effect 的清除阶段在每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次。)
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  },[]);    // 设置依赖，当这个依赖的变化了，就会重新执行useEffect，如果传入一个空数组，就只会在挂载阶段执行一次

动态添加类 和 style

<div className={["bck",isShow?'active':''].join(" ")}>home</div>
<div className={"bck "+(isShow?'active':'')} style={{fontSize:"30px"}}>home</div>
<button onClick={()=>{setIsShow(!isShow)}}>changeShow</button>

事件传参

如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

<button onClick={(e) => { assigns("小王",e) }}>hhh1</button>

    const assigns = (name, e) => {
        console.log(name, e)
    }

列表渲染

<div className="cover">
{
this.state.list.map((item,index)=>{
  return (
    <ListItem2 key={index} data={item} index={index}></ListItem2>         
     )
})
}
</div>

阻止组件渲染

如果 warn 的值是 false，那么组件则不会渲染

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

ref

作用于html节点上

直接获取到这个节点

import { useEffect, useState,createContext, createRef } from "react"

<h1 ref={valRef}>默认数据</h1>
<button onClick={changeData}>修改默认数据</button>

const changeData=()=>{
    valRef.current.innerText="修改啦"
}

作用于组件上

必须是类组件，得到的是组件实例，可以直接获取其中的state和methods等

作用于函数组件

1. 父组件

const buttonRef = useRef<HTMLButtonElement>(null);

  const getRefButton = () => {
    console.log((buttonRef.current as HTMLButtonElement).innerText);
  };

 <MyButton ref={buttonRef} />
    
<button onClick={getRefButton}>获取MyButton的ref</button>

2. 子组件

import { memo, forwardRef } from "react";

const Home = forwardRef((props, ref) => {
  return (
    <>
      <button ref={ref}>mybutton</button>
    </>
  );
})
export default memo(Home);

受控组件

input checked defaultChecked(one)
主要是表单
链接

样式设计

1. 全局样式
2. 内联样式
3. 局部样式 (.module.scss)

推荐 css in js

1. 安装依赖

yarn add styled-components --save

2.