海口市网站建设班级优化大师
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/70281605510793953656、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>;
}