当公司要求你必须会 React，Vueer 不得不学

前言

作为一个重度 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来修改自身的countchangeCount = count => {this.setState({count})}
}