React hook(TypeScript)组件入门 - 1

前情提要 作者的ts也是半瓶水不满的水平 这篇适合刚接触react无从下手的人阅读。文中的代码块都是typescript

傻瓜式基本组件写法：

空白组件

    import React from 'react';
    export const FileUploader = () => {
      return (
          <div css="align-self:flex-end;">
            Hello world
          </div>
      );
    };

非空白示例

    import React from 'react';
    export const FileUploader = () => {
      return (
          <div css="align-self:flex-end;">
            <div css={Style.dropzone} {...getRootProps({ className: 'dropzone' })}>
              <input {...getInputProps()} />
              <Typography css={Style.typo}>
                Drag and Drop some files here, or click to select files.
              </Typography>
            </div>
          </div>
      );
    };

使用时在页面上使用<FileUploader /> 即可

记得首字母要大写，不然没办法<>引用

return html代码块的意思就是在对应调用的位置上，将这些div插入进去，这种组件写法是react hook的组件写法，也可以写成function的形式.

    import React from 'react';
    export function FileUploader () {
      return (
          <div css="align-self:flex-end;">
            <div css={Style.dropzone} {...getRootProps({ className: 'dropzone' })}>
              <input {...getInputProps()} />
              <Typography css={Style.typo}>
                Drag and Drop some files here, or click to select files.
              </Typography>
            </div>
          </div>
      );
    };

我自己的感觉是这两种写法没什么太大的区别，我个人的习惯是，如果是组件都会写成const，如果是一些函数方法才会写成function。

最最最最基本常用的hook函数

hook一般中文会翻译成钩子，准确的解释在官方文档。

我自己一般就当成是系统自带函数用了

• useState()

  vue转react最难受的地方，谁懂？改个变量值这么费劲我也是第一次见，但是习惯了就好了。

  react的官方要求就是这样的，const的变量值是不可以更改的，如果想要更改必须要使用这个useState钩子函数。

  example：

      // filelist 是你想要的更改变量名字，setxxx是更改变量值的函数
      // 虽然没有明文规定 但是一般情况下我们都叫它setxxx
      // usestate<变量类型>（初始值），如果是简单的number/boolean
      // 则不需要<> 直接useState(0/false)即可
      const [filelist, setFilelist] = React.useState<File[]>();
      // handle 函数一般是button的click函数的叫法
      // e:{ target:any } 是delete event传入的参数，一般是这样写，如果不是 就用自动补全的
      const handleDelete = (e: { target: any }) => {
          orginalFilelist.splice(e.target.id, 1);
      // 这个地方就是你想要更改filelist的值 就使用set函数，这样filelist就会更改成()里面的值了
      // 但很多时候不是立刻更改的，react的代码执行本身是异步的。所以很多时候，看似代码块执行完了，但是其实还没有更改，比如在下面这行代码紧接log filelist，会发现值还是原来的那个，这个有的时候需要注意下
      // ！值得注意的是 js/ts 都有深拷贝浅拷贝的问题 我一般是这样解决数组深拷贝的
          setFilelist(orginalFilelist.slice(0));
      };
  

• useEffect()

  useEffect函数主要是负责监控->刷新，后面[]里的内容就是它监控的内容，只要[]发生变化，它就会做函数体内部的事情，当[]为空的时候，就是每次刷新做一次函数题内部的问题。

        React.useEffect(() => {
          acceptedFiles.map((file) => orginalFilelist.push(file));
          setFilelist(orginalFilelist.slice(0));
        }, [acceptedFiles]);
  

• useHistory()

  TO BE CONTINUED

Next part: CSS overide, props的使用, 布局（grid/flex）, cypress(e2e test), responsiveness 开发