import React, { useState } from ‘react’
import Card from ‘./Card’
interface UserCardProps {
renderUserInfo?: Function
}
export interface UserInfo {
name: string;
age: number;
sex: string;
}
export default function(props: UserCardProps) {
const [userInfo] = useState
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
({
name: “张三”,
age: 25,
sex: “男”,
});
const content = props.renderUserInfo ? (
props.renderUserInfo(userInfo)
) : (
姓名: {userInfo.name}
年龄: {userInfo.age}
性别: {userInfo.sex}
);
return
{content}
}
- 在外部使用人员信息卡片组件
import React from ‘react’
import UserCard, { UserInfo } from “./components/UserCard”;
export default function () {
return (
<UserCard
renderUserInfo={(userInfo: UserInfo) => {
return (
- 姓名： {userInfo.name}
);
}}
);
}
Context,React中的provide/inject通常我们在项目开发中，对于多组件之间的状态管理，在
Vue中会使用到Vuex,在React中会使用到redux或者Mobx,但对于小项目来说，使用这些状态管理库就显得比较大材小用了，那么在不使用这些库的情况下，如何去完成数据管理呢？比如面试最常问的祖孙组件通信。在Vue中我们可以使用provide/inject，在React中我们可以使用Context。假设有这样一个场景，系统现在需要提供一个换肤功能，用户可以切换皮肤，现在我们分别使用
Vue和React来实现这个功能。Vue中的provide/inject在
Vue中我们可以使用provide/inject来实现跨多级组件进行传值，就以上面所说场景为例，我们使用provide/inject来实现以下首先，修改
App.vue内容为以下内容然后在任意层级的子组件中像下面这样使用
这样就可以实现
theme在所有子组件中进行共享了React中的Context在
Vue中我们使用provide/inject实现了组件跨层级传值功能，在React中也提供了类似的功能即Context，下面我们使用Context来实现相同的功能。在项目
src目录下新建context目录，添加MyContext.js文件，然后添加以下内容import {createContext} from ‘react’
// 定义 MyContext,指定默认的主题为
lightexport const MyContext = createContext({
theme: ‘light’
})
MyContext提供了一个Provider，通过Provider可以将theme共享到所有的子组件。现在我们在所有的组件的共同父组件比如App.js上面添加MyContext.Provider将theme共享出去import { MyContext } from ‘@/context/MyContext’;
export default function() {
const [theme, setTheme] = useState(‘dark’)
return (
<MyContext.Provider
value={{
theme
}}
</MyContext.Provider>
)
}
然后这时候就可以直接在所有的子组件里面使用定义的主题
theme了import React, { useContext } from ‘react’
import { MyContext } from ‘@/context/MyContext’;
export default function() {
const {theme} = useContext(MyContext)
return <div className={
child-${theme}}>}
没有了
v-model,但也不影响使用我们知道
React和Vue都是单向数据流的，即数据的流向都是由外层向内层组件进行传递和更新的，比如下面这段React代码就是标准的单向数据流.import React, { useState } from “react”;
export default function(){
const [name] = useState(‘子君’)
return
}
在
vue中使用v-model如上代码，我们在通过通过
value属性将外部的值传递给了input组件，这个就是一个简单的单向数据流。但是在使用Vue的时候，还有两个比较特殊的语法糖v-model和.sync，这两个语法糖可以让Vue组件拥有双向数据绑定的能力，比如下面的代码通过
v-model,当用户修改input的值的时候，外部的name的值也将同步被修改。但这是Vue的语法糖啊，React是不支持的，所以React应该怎么办呢？这时候再想想自定义v-model，v-model实际上是通过定义value属性同时监听input事件来实现的，比如这样:<input :value=“value” @input=“$_handleChange”/>
在
react寻找v-model替代方案同理，
React虽然没有v-model语法糖，但是也可以通过传入属性然后监听事件来实现数据的双向绑定。import React, { useState } from ‘react’
export default function() {
const [name, setName] = useState(‘子君’)
const handleChange = (e) => {
setName(e.target.value)
}
return
}
小编刚开始使用
react，感觉没有v-model就显得比较麻烦，不过麻烦归麻烦，代码改写也要写。就像上文代码一样，每一个表单元素都需要监听onChange事件，越发显得麻烦了，这时候就可以考虑将多个onChange事件合并成一个，比如像下面代码这样import React, { useState } from ‘react’
export default function () {
const [name, setName] = useState(‘子君’)
const [sex, setSex] = useState(‘男’)
const handleChange = (e:any, method: Function) => {
method(e.target.value)
}
return
<input value={name} onChange={(e) => handleChange(e, setName)}>
<input value={sex} onChange={(e) => handleChange(e, setSex)}>
}
没有了指令，我感觉好迷茫
在
Vue中我们一般绘制页面都会使用到template，template里面提供了大量的指令帮助我们完成业务开发，但是在React中使用的是JSX,并没有指令，那么我们应该怎么做呢？下面我们就将Vue中最常用的一些指令转换为JSX里面的语法(注意: 在Vue中也可以使用JSX)v-show与v-if在
Vue中我们隐藏显示元素可以使用v-show或者v-if,当然这两者的使用场景是有所不同的，v-show是通过设置元素的display样式来显示隐藏元素的，而v-if隐藏元素是直接将元素从dom中移除掉。- 看一下
Vue中的v-show与v-if的用法
姓名:{{ name }}
{{ dept }}
- 将
v-show，v-if转换为JSX中的语法
在
Vue中指令是为了在template方便动态操作数据而存在的，但是到了React中我们写的是JSX,可以直接使用JS,所以指令是不需要存在的，那么上面的v-show,v-if如何在JSX中替代呢import React, { useState } from ‘react’
export default function() {
const [showName] = useState(false)
const [showDept] = useState(true)
const [userInfo] = useState({
name:‘子君’,
dept: ‘银河帝国’
})
return (
{/**模拟 v-show */}
<span style={{display: showName ? ‘block’ : ‘none’}}>{userInfo.name}
{/**模拟 v-if */}
{showDept ? {userInfo.dept}: undefined}
)
}
v-forv-for在Vue中是用来遍历数据的，同时我们在使用v-for的时候需要给元素指定key，key的值一般是数据的id或者其他唯一且固定的值。不仅在Vue中，在React中也是存在key的，两者的key存在的意义基本一致，都是为了优化虚拟DOMdiff算法而存在的。- 在
Vue中使用v-for
- 看一下
{{ item.name }}
- 在
React中使用v-for的替代语法
在
react中虽然没有v-for，但是JSX中可以直接使用JS,所以我们可以直接遍历数组import React from ‘react’
export default function() {
const data = [
{
id: 1,
name: “子君”,
},
{
id: “2”,
name: “张三”,
},
{
id: “3”,
name: “李四”,
},
];
return (
{
data.map(item => {
return
- 在
- {item.name}
-
})
}
)
}
v-bind与v-onv-bind在Vue中是动态绑定属性的，v-on是用于监听事件的,因为React也有属性和事件的概念，所以我们在React也能发现可替代的方式。- 在
Vue中使用v-bind与v-on
<input :value=“value” @input=“handleInput” />
- 在
React中寻找替代方案
在
Vue中，作者将事件和属性进行了分离，但是在React中，其实事件也是属性，所以在本小节我们不仅看一下如何使用属性和事件，再了解一下如何在React中自定义事件- 开发一个
CustomInput组件
import React from ‘react’
export interface CustomInputProps {
value: string;
//可以看出 onChange是一个普通的函数,也被定义到了组件的props里面了
onChange: ((value: string,event: React.ChangeEvent) => void) | undefined;
}
export default function(props: CustomInputProps) {
function handleChange(e: React.ChangeEvent) {
// props.onChange是一个属性，也是自定义的一个事件
props.onChange && props.onChange(e.target.value, e)
}
return (
)
}
- 使用
CustomInput组件
import React, { useState } from ‘react’
import CustomInput from ‘./components/CustomInput’
export default function() {
const [value, setValue] = useState(‘’)
function handleChange(value: string) {
setValue(value)
}
return (
)
}
总结
刚开始从
Vue转到React的时候，其实是有点不适应的，但是当慢慢的习惯之后，就会发现Vue和React是存在很多共性的，可以参考的去学习。当然无论Vue还是React，上手比较快，但是想深入学习还是需要下功夫的，后续小编将会对Vue和React的用法在做更深入的介绍，敬请期待。最后
说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
总结
-
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
-
算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
- 在
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
