前言：

笔者之前主要是用 vue的，进到公司以后，要求用 react才展开学习的。
刚开始学习，总以为 react像vue一样写好了很多东西，到处查看文档，资料都没有，发现原来需要自己实现的。
本文所说的vue, 主要指vue2; react, 主要是 hook。

条件渲染

vue中有 v-if 可以进行判断
react 需要在 JSX中，进行判断，如：

function Dialog(props) {
    if(!props.visible) {
        return null
    }
    return (
        <div>
            1111
        </div>
    )
}

---------------------------------------------------------
function Count() {
    const [isShowNum, setIsShowNum] = useState(true)
  
    return (
        <div>
            <button onClick={()=>setIsShowNum(!isShowNum)}>是否展示数字</button>
            {
                isShowNum && (<div>123456</div>)
            }
        </div>
    )
}

循环渲染

vue 中是有 v-for 可以直接使用的。
react 中没有，需要在 JSX中写map()

function App() {
  const list = [
    {
      id: 0,
      name: '列表1'
    },
    {
      id: 1,
      name: '列表2'
    },
    {
      id: 3,
      name: '列表3'
    }
  ]
  return (
    <div className="App" >
      {
        list.map(item => {
          return <div key={item.id}>{item.name}</div>
        })
      }
    </div>
  );
}

props 默认值

vue 中有 props属性可以去规定类型和默认值。
react 的写法是这样的：

// sonCom.jsx 文件中
import React from "react";
import PropTypes from 'prop-types'  
// 默认值
SonCom.defaultProps = {
    age: 18,
    name: 'test1'
}
// 规定类型
SonCom.propTypes = {
    age: PropTypes.number
}

export function SonCom(props) {
    return (
        <div>
            组件
        </div>
    )
}

--------------------------------------------------------------------------
如果是 ts来写，规定类型可以不用这么写了。 
且这里也提供另一种 props 默认值的写法（es6）.
// sonCom.tsx
import React from "react";

interface PropsType {
    age: number,
    name: string
}

export function SonCom(props: PropsType) {
    const {
        age = 18
    } = props
    return (
        <div>
            组件 ==== { age }
        </div>
    )
}

官方文档说明： zh-hans.reactjs.org/docs/typech…

样式污染的问题( CSS )

vue 中有 scoped 可以处理样式污染的问题。
react 只要在一个组件中引入了 css 文件就相当于全局引入了，我们都了解重名了，后面会覆盖前面的样式。我们可以用 css module, styled-components 来解决。

css module

我们用 creat-react-app 搭建的 react 项目已经内置好了 css module, 这一块不需要我们处理，直接使用就好。
css 文件正常写（文件名需要以 .module.scss 结尾）;js中的类名，需要用引入的变量加上所写类名。拿一个组件来举例：

// sonCom.jsx
import React from 'react'
import style from './sonCom.module.scss'

export function SonCom(props) {
    return (
        <div className={style.box}>
            <div className={style.content}></div>
        </div>
    )
}

// sonCom.module.scss
.box{
    width: 100px;
    height: 100px;
    background: pink;
    .content {
        width: 10px;
        height: 10px;
        background: red;
    }
}

styled-components

这里我放一个开源项目，大家一看就能明白的案例：
styled-components 案例

总结

这样一看用 react好像很麻烦，但用 react 可以更加灵活开发。

从vue 转化到 react 一些困惑

前言：