https://github.com/linbudu599/mutable-music-app

Make A Mutable App By Immutable.Js😼
https://github.com/linbudu599/mutable-music-app

Last synced: 10 days ago
JSON representation

Make A Mutable App By Immutable.Js😼

• Host: GitHub
• URL: https://github.com/linbudu599/mutable-music-app
• Owner: linbudu599
• License: mit
• Created: 2020-02-15T10:55:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:22:00.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T14:10:49.903Z (26 days ago)
• Language: TypeScript
• Size: 8.48 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mutable-Music-App

Make A Mutable App By ImmutaJs😼

## 挖挖挖坑

- 暂时不启用严格的 tsx 检查

- `styled-components` 与 `ts` 协作

- react-router-config

实现命令式路由，很像 Vue-router

- forwardRef 与 useImperativeHandle

  - useRef，使函数式组件也能够享受到获取 DOM 元素或者自定义组件，父组件获取子组件引用而后调用子组件方法，如 focus 等。

  - forwardRef，可以获取父组件的 ref 实例作为子组件的参数（与 props 同级），然后再把这个 ref 绑定到自己内部节点，就可以实现 ref 的透传了！

  - useImperativeHandle，常与 forwardRef 搭配使用，可以控制向父组件暴露的属性以及方法，第一个参数即为 forwardRef 包裹后得到的父组件 ref 实例。

    ```tsx

    const Test: FC = (): JSX.Element => {

      const testRef: MutableRefObject = useRef("faaather");

      const handleClick = (e: SyntheticEvent): void => {

        console.log("自身button的内容：", e.currentTarget.innerText);

        console.log("子组件input的对象:", testRef.current);

        console.log("子组件input的value值：", testRef.current.value);

        console.log("子组件input的类型：", testRef.current.type());

      };

      return (

        

          

          获取子组件的input的value和type

        

      );

    };

    export default Test;

    function TestChild(props: {}, ref: Ref): JSX.Element {

      const testRef: MutableRefObject = useRef(); //创建一个自身的ref，绑定到标签节点上

      console.log(ref);

      //暴露出一个想要让父组件知道的对象,里面可以是属性也可以是函数

      useImperativeHandle(ref, () => {

        //第一个参数，要暴露给哪个(ref)？第二个参数要暴露出什么？

        return {

          //(testRef.current as HTMLInputElement) 类型断言，自己肯定就是这样的类型

          value: (testRef.current as HTMLInputElement).value, //暴露出input的value

          type: () => (testRef.current as HTMLInputElement).type, //暴露出input的type类型

          test: "test"

        };

      });

      return (

        <>

          ) => {

              console.log(e.currentTarget.value);

              console.log(e.currentTarget.type);

            }}

          />

        >

      );

    }

    export const TestChildForward: ForwardRefExoticComponent = memo(

      forwardRef(TestChild)

    );

    ```

## 为什么是...？

### Styled-Components

`All In Js`！

它解决了哪些痛点？

- CSS 耦合程度高

- 支持预处理器如嵌套语法

- CSS 代码现在可以处理逻辑了！

- 语义化，总觉得 Html5 的语义化少了点什么吧？

## Immutable.JS

- fromJS/toJs

- get/getIn

  ```js

  let jsObj = { a: { b: 1 } };

  let res = jsObj.a.b;

  //immutable 对象

  let immutableObj = fromJS(jsObj);

  let res = immutableObj.getIn(["a", "b"]); // 注意传入的是一个数组

  ```