当公司要求你必须会 React，Vueer 不得不学
站长
· 阅读数 70
前言
作为一个重度 Vue 使用者，在学习使用React时难免有些不适应，甚至有点急躁。
但时事变迁，现在不学 React，找工作真的很难呀。
所以纵使 React 再不好学，也要熟练运用它。
毕竟编程就是这样，有些语言可能不太好理解，不过既然你不是框架开发者，只能适应它。
思想方面
学 React 的时候，就先把 Vue 给忘掉。
不要急，慢慢来。
正文
如果看不懂，可以跳着看，先把能看懂的吸收掉。
渲染 HTML 字符串
function Test() {
return (
<>
<p dangerouslySetInnerHTML={{ __html: '<i style="color:red;">123</i>' }} />
</>
)
}
条件渲染、列表渲染
不像 Vue 有 v-if、v-for 指令，React 直接使用 js。
React 会自动将数组展开渲染。
export function Login(props: any) {
const [show, setShow] = useState(false)
const [list, setList] = useState(['小梅', '小军', '小强'])
return (
<>
{show ? '显示的文本' : '隐藏的文本'}
<br />
{list}
</>
);
}
事件
传递函数。在下面的例子中，点击父组件按钮和Test组件按钮都会打印点我了。
如果需要传参，，请用箭头函数。。
这是个父组件：
export function Login(props: any) {
function handleClick() {
console.log('点我了');
}
return (
<>
<button onClick={handleClick}>父组件</button>
<Test xx={handleClick} />
</>
);
}
这是个子组件：
export function Test(props: any) {
return <button onClick={props.xx}>Test组件</button>
}
受控组件
使用 state 来控制表单的输入显示。
class MyComponent extends React.Component{
state = {
inputVal: 'input'
}
handleInput = e => {
this.setState({
inputVal: e.target.value
})
}
render() {
return (
<>
<p>{this.state.inputVal}</p>
<input type="text" value={this.state.inputVal} onInput={this.handleInput} />
</>
)
}
}
非受控组件
表单的输入显示不受 state 控制。而是取得表单元素的 dom，来获取或设置它们的值。
import { useRef } from "react";
export function Login(props: any) {
const nameInput = useRef<HTMLInputElement>(null)
function handleClick() {
console.log(nameInput.current?.value);
}
return (
<>
姓名：
<input ref={nameInput} type="text" />
<br />
<button onClick={handleClick}>提交</button>
</>
);
}
父子组件通信
父向子传递数据，通过 prop 传。子向父传递数据，也是给子传递一个函数，子调用函数来传递修改父的数据。
父组件
// 父组件
class MyComponent extends React.Component{
state = {
count: 99
}
render() {
return (
<div>
<ChildComponent count={this.state.count} changeCount={this.changeCount} />
</div>
)
}
// 接收子组件传递的count来修改自身的count
changeCount = count => {
this.setState({
count
})
}
}
子组件
// 子组件
class ChildComponent extends React.Component {
render() {
return <div>
{this.props.count}
<button onClick={this.addCount}>addCount</button>
</div>
}
addCount = () => {
// 获取父组件传递的props
const { changeCount, count } = this.props
// 调用父组件的changeCount方法
changeCount(count + 1)
}
}
实现插槽
React 实现像 Vue 一样的默认插槽、具名插槽、作用域插槽，其实就是利用 React 的 prop 什么都能传的特点。
默认插槽，利用 this.prop.children
export class Login extends React.Component {
render() {
return (
<>
<Child>我是光</Child>
</>
)
}
}
function Child(props: any) {
return (
<div>
<div>我显示父组件传进来的内容：</div>
<br />
{props.children}
</div>
)
}
具名插槽。父组件不一定传函数，也可以直接渲染标签，子组件接收就可以了。
export class Login extends React.Component {
render() {
return (
<>
<Child renderTitle={
<div>这。。。</div>
}>我是光</Child>
</>
)
}
}
function Child(props: any) {
return (
<div>
{props.renderTitle ? props.renderTitle : <div>默认插槽</div>}
</div>
)
}
作用域插槽。子组件可以利用函数参数把数据带给父组件。
render() {
return (
<>
<Child renderItem={(item: string, index: number) => {
return <li>{index+1}号，{item}</li>
}}></Child>
</>
)
}
}
function Child(props: any) {
const arr = [
'姚明',
'科比'
]
return (
<div>
{arr.map((item, index) => {
return props.renderItem ? props.renderItem(item, index) : <div>空</div>
})}
</div>
)
}
setState
使用 setState，要注意不能直接修改原数据。当需要修改层级很深的对象时，为了方便可以使用 immer 库。（比较流行）
this.setState({
userName: '小花',
userAge: 19
})
生命周期
React 常用的生命周期函数有 componentDidMount、shouldComponentUpdate。 componentDidMount 和 Vue 的 mounted 钩子差不多。shouldComponentUpdate 让用户能自主决定一个组件是否需要渲染。
class MyComponent extends React.Component{
constructor(props) {
super(props)
}
shouldComponentUpdate (nextProps, nextState, nextContext) {
console.log(nextState.count, this.state.count)
if (nextState.count !== this.state.count) {
return true // 允许渲染，会往下执行render
}
return false // 不渲染，不执行render
}
render() {
return ...
}
}
React Portals
当一个父元素设置 overflow: hidden 的时候，子元素超出父元素边界就会看不见。这对于弹框组件不太友好。
比如父组件：
export function Login() {
const [show, setShow] = useState(false)
function handleClick() {
setShow(!show)
}
return (
<div className='father'>
<Model show={show} />
<button onClick={handleClick}>打开弹框</button>
</div>
);
}
.father {
overflow: hidden;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
border: 1px solid #000;
}
然后子组件：
function Test(props: any) {
return (
<>
{
props.show ?
<div className='model'>
你好，我是弹框。
</div> :
<div>啥也不是</div>
}
</>
)
}
.model {
position: fixed;
left: 50%;
top: 50%;
/* transform: translate(-50%, -50%); */
background-color: red;
color: #fff;
width: 250px;
height: 250px;
border: 1px solid #000;
}
就会出现这样的情况。
将子组件改为 Portal 后，问题立马得到解决。
import React from 'react';
import ReactDOM from "react-dom";
import './test.css'
function Test(props: any) {
return (
<>
{
props.show ?
ReactDOM.createPortal(<div className='model'>你好，我是弹框。</div>, document.body)
:
<div>啥也不是</div>
}
</>
)
}
export default React.memo(Test)
React Context
和 Vue 的 Provide/Inject 作用是一样的，但是写的东西更多一点。
import { createContext,useContext } from "react";
const ThemeContext = createContext('');
export function Login() {
return (
<ThemeContext.Provider value='喔喔喔'>
<div className='father'>
<Test />
</div>
</ThemeContext.Provider>
);
}
function Test(props: any) {
const theme = useContext(ThemeContext);
return (
<>
<div>{theme}</div>
</>
)
}
异步组件
简单记录了一下用法。
import React from "react";
export function Login() {
return (
<div className='father'>
<React.Suspense fallback={<div>loading...</div>}>
<Lazyy />
</React.Suspense>
</div>
);
}
const Lazyy = React.lazy(() => new Promise((resolve) => {
setTimeout(() => {
const a = import('../../components/test')
// @ts-ignore
resolve(a)
}, 1000);
}))
useEffect
说实话，我当时对这个 useEffect 是一点也没搞明白，什么玩意儿！但要是理解了 React 函数式组件的渲染逻辑，就不会那么懵逼了。
React 函数式组件不像 class 组件，假设你在函数式组件里定义了一个方法，那么每次重新渲染时都会定义一个新的方法，与之前方法的引用并不相同。
而在 class 组件里定义一个方法，它的引用是不会变的，重新渲染也只是重新执行了 render 方法。
如果你正在学习 React，并且也对 useEffect 充满疑惑，一定要看看 Dan 写的这篇文章！useEffect 完整指南
import { useState } from "react";
// let a = 1
export function Login(props: any) {
const [count, setCount] = useState(0);
function say () {
let a = 1
console.log('Hello Vue and React, are you ok ?', a ++);
}
say()
return (
<>
<button onClick={() => setCount(count + 1)}>加1，count：{count}</button>
</>
);
}
useState、useMemo、useCallback、React.memo
这里想想阐述的是，每次 React 改变state，函数式组件都会重新执行一遍，它的子组件也会跟着重新执行一遍。
如果想让它的子组件不会重新执行一遍，可以使用 React.memo 包裹子组件，它会使用 Object.is 来对比前后的 prop 是否相同， 不同就会重新渲染子组件。
在这里，我写了一个名为 Login 的组件（名字不重要，jy），它使用到了 Test 组件。
import { useCallback, useMemo, useState } from "react";
import Test from "components/test";
export function Login(props: any) {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
// Test 组件执行一遍
const data = useMemo(() => ({
lalala: count
}), [])
// Test 组件首次会执行一遍，之后每次 count 加1，Test 组件都会执行一遍
// const data = useMemo(() => ({
// lalala: count
// }), [count])
// Test 组件首次会执行一遍，在 count 为3或4的时候会执行一遍
// const data = useMemo(() => ({
// lalala: count
// }), [count === 3])
return (
<>
<button onClick={() => handleClick()}>加1，count：{count}</button>
<Test suibian={data} />
</>
);
}
Test 组件如下
import React from 'react';
function Test(props: any) {
console.log('Test函数组件执行了一遍');
return <button>Test</button>
}
export default React.memo(Test)
useCallback
现在我只有一个 Login 组件（不要在意名字，jym）。
为什么出现下面这种情况？
第一种情况依赖是个空数组，useCallback 它会将传入的函数进行保存，且它永远不会更新。 再由于闭包，传入的函数里所获取到的 count 值永远都是 0。所以每次点击按钮传入 setCount 的值其实都是1。
第二种情况以为传入了 count 依赖，在 count 变化后，useCallback 里的函数也会重新定义，拿到本次执行 Login 函数时定义的 count 值。 此时的 count 值为最新值。
import { useCallback, useState } from "react";
export function Login(props: any) {
const [count, setCount] = useState(0);
// 点击按钮后，count 加1，之后永远都为1了。
const handleClick = useCallback(() => {
setCount(count + 1);
}, []);
// 每次点击按钮，count 都会加1
// const handleClick = useCallback(() => {
// setCount(count + 1);
// }, [count]);
return (
<>
<button onClick={() => handleClick()}>加1，count：{count}</button>
</>
);
}
React 实现计算属性
使用类的 getter 来实现计算属性，不过实现不了缓存。
class Example extends Component {
state = {
firstName: '',
lastName: '',
};
// 通过getter而不是函数形式，减少变量
get fullName() {
const { firstName, lastName } = this.state;
return `${firstName} ${lastName}`;
}
render() {
return <Fragment>{this.fullName}</Fragment>;
}
}
如果要实现缓存，可以使用 memoize-one 库，它本质是一个高阶函数，会对传入的参数作前后对比。如果与上次传入的参数相同，就返回上次缓存的结果。 否则根据新的入参重新计算返回值。
import memoize from 'memoize-one';
import React, { Fragment, Component } from 'react';
class Example extends Component {
state = {
firstName: '',
lastName: '',
};
// 如果和上次参数一样，`memoize-one` 会重复使用上一次的值。
getFullName = memoize((firstName, lastName) => `${firstName} ${lastName}`);
get fullName() {
return this.getFullName(this.state.firstName, this.state.lastName);
}
render() {
return <Fragment>{this.fullName}</Fragment>;
}
}
如何用 React Hooks 实现计算属性呢？使用 useMemo 钩子。
import React, { useState, useMemo } from 'react';
function Example(props) {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
// 使用 useMemo 函数缓存计算过程
const renderFullName = useMemo(() => `${firstName} ${lastName}`, [
firstName,
lastName,
]);
return <div>{renderFullName}</div>;
}
useReducer
看下一个简单的例子，了解下其用法。
import React, { useReducer } from "react";
const initState = {
userName: '匿名',
}
const reducer = (state: any, action: any) => {
switch (action.type) {
case 'add':
return {
...state,
userName: state.userName + '+'
}
case 'del':
return {
...state,
userName: state.userName + '-'
}
default:
return {
...state,
userName: state.userName + '*'
}
}
}
export function Login() {
const [state, dispatch] = useReducer(reducer, initState)
function handleClick() {
dispatch({
type: 'add'
})
}
return (
<>
hello, {state.userName}
<button onClick={handleClick}>按钮</button>
</>
)
}
结尾
这一篇文章，并没有特别的去解释某些东西，更多的是给出一个例子，代码的一个 demo。
对于初学一点没接触过 React 的同学可能有点看不懂。
不过遇到不懂的东西，就打开浏览器另外一个窗口去搜一搜，再回过头来看写的，也是一种办法。
最后希望与大家一起努力，实现自己的梦想。（变富😂）
转载自:https://juejin.cn/post/7173953093158060039