根据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>;
}