根据vue学习react

react的函数式组件与vue2是很像的

一、基础类似点

        1、组件下拥有一个根节点，vue2是template，react是幽灵标签<>

        2、vue2是{{}}以及v-model，react的绑定是{}

        3、vue2编译html是v-html，react是{}，并且react的jsx中可以直接写标签，不需要学“”

        4、vue2中遍历无用标签包裹一般就自己写，但是react幽灵标签不能使用key遍历，这个时候可以使用Fragment、

二、方法类似点

        1、点击vue2是@click，react是onClick={}  也是这样的方式

        2、vue2的双向绑定是直接的，vue3需要用ref，reactive，react用useState，跟vue3很像

        3、（// 这一部分比较麻烦）useState中赋值复杂对象使用set，set(...data, 新参数)， 数组操作也需要这样，所以react中用push，slice这些方法非常少，它的方式更类似于微信小程序的setData，data后续是我们需要的值

三、react Hook组件通信学习

        1、dom组件，文件引入可以import，但是class必须写className,style需要写style={{width: 100}},比较长的属性依旧还是写驼峰，也可以直接写对象，定义一个样式styleObject，style={styleObject},展开语法，标签中依旧可以使用{...styleObject}

        2、组件传值的props，通信

function Article({title, content, active}) {
  return (
    <>
      <h4>{title}</h4>
      <div>{content}</div>
      <p>状态：{active? '显示': '隐藏'}</p>
    </>
  )
}

function App() {

  return (
    <> 
      <Article title="标题1" content="内容1"></Article>
      <Article title="标题2" content="内容2"></Article>
    </>
  );
}

        3、插槽概念，jsx的值，可以直接接收jsx作为children，不需要想vue2写slot插槽

function List({children}) {
  return (
    <ul>
      {children}
    </ul>
  )
}

function App() {

  return (
    <> 
      <List>
        <li>124</li>
        <li>125</li>
      </List>
    </>
  );
}

        4、 子组件往父组件传值，react也可以style使用三元表达式,返回值这里会可能存在异步的问题，建议用一个参数去保存改变后的内容，然后再向前传递

function Detail({onActive}) {
  const [status, setStatus] = useState(false)
  function click() {
    Promise.resolve().then(()=> {
      setStatus(status => !status)
      onActive(!status)
    })
  }
  return (
    <>
      <button onClick={click}>按钮-{status+''}</button>
      <div style={{display: status? 'block': 'none'}}>154235235</div>
    </>
  )
}



function App() {

  return (
    <> 
      <Detail onActive={handleActive}></Detail>
    </>
  )
}

        5、context钩子使用方式

                使用React.createContext("")进行定义

                <nameContext.Provider value={"ys"}>表明下级子组件可以使用这个值

                <nameContext.Consumer>子组件可以直接使用name访问

//组件A
import React from "react";
import B from "./B";
​
export const nameContext = React.createContext("");
export default function App() {
  return (
    <nameContext.Provider value={"ys"}>
      大家好，
      <B />
    </nameContext.Provider>
  );
}

//组件B
import C from "./C";
​
export default function B() {
  return (
    <>
      我是今天的分享者，
      <C />
    </>
  );
}

//组件C
import React from "react";
import { nameContext } from "./App";
​
export default function C() {
  return (
    <nameContext.Consumer>
      {(name) => <span>我叫{name}</span>}
    </nameContext.Consumer>
  );
}

链接：https://juejin.cn/post/7028160551079395365

           6、useContext可以不需要写标签，直接获取

                    const name = useContext(nameContext)

四、react的其他钩子函数

        1、const [state, dispatch] = useReducer(管理方法，参数)，状态管理机制，state是值，dispatch是操作。

        2、useRef() 存储值，不会响应式，const a = useRef()，a.current = 1，很像是拷贝，react中也有ref的参数，可以与useRef进行dom绑定以及访问，同样父组件可以通过useImperativeHandle调用子组件方法

const Child = forwardRef(function (props, ref) {
  useImperativeHandle(ref, () => ({
    // 暴露出去的方法
    myFn: () => {
      console.log("子组件的方法")
    }
  }))

  return (
    <div>子组件</div>
  )
})

function App() {
  const child = useRef()

  function handleActive() {
    child.current.myFn()
  }

  return (
    <> 
      <Child ref={child}/>
    </>
)
}

        3、useEffect副作用钩子，默认会执行几次，相当于vue的watch，但是他是默认监听全部，所以需要设置监听的内容

        useMemo进行缓存计算结果，相当于vue的compute，计算属性

        4、useCallBack(依赖函数，依赖数组)， memo记忆组件

  

五、CodeGeeX

        1、提问函数如何使用

        2、帮你解释代码

        3、帮你注释

        4、帮你解决代码上的bug问题

        5、帮你做代码上的测试

六、router里面内容是一样的

        常见的router.jsx,provideRouter，使用navigate进行跳转

七、react的生命周期

        函数式中:

               setup：整个function就是类组件式的render生命周期

               componentDiaMount：挂载，useEffect的第二个参数用空数组则不会触发update

               componentDiaUpdate：更新，在函数式中用的是useEffect进行更新

                componentWillUnmount：销毁组件，在函数式中使用副作用函数的return

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了！Index页面')
        return ()=>{
            console.log('老弟，你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}