做网站需要看那几点,wordpress 登录用户信息,线上推广图片,做网站的流程百科react的函数式组件与vue2是很像的
一、基础类似点 1、组件下拥有一个根节点#xff0c;vue2是template#xff0c;react是幽灵标签 2、vue2是{{}}以及v-model#xff0c;react的绑定是{} 3、vue2编译html是v-html#xff0c;react是{}#xff0c;并且react的jsx中…react的函数式组件与vue2是很像的
一、基础类似点 1、组件下拥有一个根节点vue2是templatereact是幽灵标签 2、vue2是{{}}以及v-modelreact的绑定是{} 3、vue2编译html是v-htmlreact是{}并且react的jsx中可以直接写标签不需要学“” 4、vue2中遍历无用标签包裹一般就自己写但是react幽灵标签不能使用key遍历这个时候可以使用Fragment、
二、方法类似点 1、点击vue2是clickreact是onClick{} 也是这样的方式 2、vue2的双向绑定是直接的vue3需要用refreactivereact用useState跟vue3很像 3、// 这一部分比较麻烦useState中赋值复杂对象使用setset(...data, 新参数) 数组操作也需要这样所以react中用pushslice这些方法非常少它的方式更类似于微信小程序的setDatadata后续是我们需要的值
三、react Hook组件通信学习 1、dom组件文件引入可以import但是class必须写className,style需要写style{{width: 100}},比较长的属性依旧还是写驼峰也可以直接写对象定义一个样式styleObjectstyle{styleObject},展开语法标签中依旧可以使用{...styleObject} 2、组件传值的props通信
function Article({title, content, active}) {return (h4{title}/h4div{content}/divp状态{active? 显示: 隐藏}/p/)
}function App() {return ( Article title标题1 content内容1/ArticleArticle title标题2 content内容2/Article/);
} 3、插槽概念jsx的值可以直接接收jsx作为children不需要想vue2写slot插槽
function List({children}) {return (ul{children}/ul)
}function App() {return ( Listli124/lili125/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}/buttondiv 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 h2JSPang.com/h2;
}
