再次入门 react ，不同的收获

react

更适合入门 react 的学习，由于本人没有正儿八经的 react 的项目经验。 以前由于 react 太难了从入门到放弃，后来由于疫情期间参与公司 react+ts 直播项目，打酱油再次入门 react，随着公司技术转向 react 开始入门 react。

对比 vue ,react 更加接近原生的用法。长时间的 vue 一把嗦，都忘记原生的要怎么写了。react 可以在 vue 和 js 找出类似点。因此入门很简单，放弃更容易，秒秒钟的事。

JSX

写法：和写原生的 html 差很少，由于 JSX 语法上更接近 JavaScript 而不是 HTML，因此 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定（例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。）用到了变量就用 {} 把变量包起来。每一个 JSX 元素都是调用 React.createElement() 的语法糖。

例如：

const element = (
  <>
    <h1>Hello!{name}</h1>
    <h2>Good to see you here.</h2>
  </>
);
复制代码

<></> 这里指的是一个空标签，由于只能有一个“根” DOM 节点，Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用

元素渲染

ReactDOM.render()，方法里面传入一个要渲染的元素和一个须要挂载到某一个 DOM 节点上的 id

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
复制代码

React 元素是不可变对象。一旦被建立，你就没法更改它的子元素或者属性。更新 UI 惟一的方式是建立一个全新的元素，并将其传入 ReactDOM.render()。

React 应用只会调用一次 ReactDOM.render(),页面渲染以后，若是咱们想要修改 ui，就须要把代码封装到有状态组件中

条件处理

和 javascript 上面的差很少

// 三目运算
function Greeting() {
  return (
    <div>
    {
      isLoggedIn? <UserGreeting />:<GuestGreeting />
    }
    </div>
  )
}
// && 使用
function Greeting() {
  return (
    <div>
    {
      isLoggedIn&&isSunseekers? <UserGreeting />:<GuestGreeting />
    }
    </div>
  )
}
复制代码

列表 && key

循环用列表渲染用 map ，写法和 javascript ，和 vue 同样要指定惟一的 key。变量用 {} 包裹

function NumberList(){
  const numbersList = []
  return (
    <ul>
    {
      numbersList.map(item=>(
        <li key={item}>{item}</li>
      ))
    }
    </ul>
  )
}
复制代码

事件处理

和原生的 js 差很少，区别在于 React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你须要传入一个函数做为事件处理函数（是一个变量），而不是一个字符串

<button onClick={activateLasers}>
  Activate Lasers
</button>
复制代码

给事件传参数通常经过箭头函数

<button onClick={() => Delete(item)}>Delete Row</button>
复制代码

还能够是 bind 的方式，我不喜欢用,我以为箭头函数方便

354- 一文吃透 React 事件机制原理

插槽

有些组件没法提早知晓它们子组件的具体内容，好比通用容器的展现好比说 Loading Dialog Scroll 等等，这时候咱们就可使用组合。这个就像 vue 里面的插槽同样，父组件给子组件传递一段 JSX 或者 DOM 标签

// 子组件
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children} // 这里就是插槽，内容由父组件控制，由 props.children 接受到内容
    </div>
  );
}
// 父组件
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
    // 传递给子组件的一段内容，做为children 经过prop 传递
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
复制代码

经过 props.children 是一种传递的方式，我还能够也是能够直接使用 props 属性进行传值的，传值的方式和是以前同样直接在组件上面传

function App() {
  return (
    <SplitPane
      left={
        <Contacts /> // 给子组件传递一个 left 属性，他的值是一个组件
      }
      right={
        <Chat />
      } />
  );
}
复制代码

enmmmmm ，这么看的话，其实就是 props 传值的类型能够是任意的，基本类型，引用类型，函数，组件

函数组件

由于我我的在项目中习惯使用函数组件一把嗦，关于 class 组件我就不介绍了。新版中引入了 hook，让函数组件也可有有生命周期，使用起来更加方便。

函数式组件的首字母要大写，小写的函数，不会被看成组件渲染的。函数组件能够接受一个参数 props 表示传进来的数据（全部传进来的数据都用 props 包裹起来了），不限制类型，能够是函数，对象，数组...，有一个返回值，能够被 react 识别并渲染，一般是 jsx 形式。

函数组件是都决不能修改自身的 props，是一个“纯函数”，相同的输入必定是相同的输出

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}
复制代码

数据是向下流动的,不论是父组件或是子组件都没法知道某个组件是有状态的仍是无状态的，而且它们也并不关心它是函数组件仍是 class 组件。

若是项目是 react+ts 结合的话，可使用 FC 类型来声明，FC 是 FunctionComponent 的简写, 这个类型定义了默认的 props(如 children)以及一些静态属性(如 defaultProps)

import React from 'react';
/**
 * 声明Props类型
 */
export interface MyComponentProps {
  className: string;
  style: React.CSSProperties;
}
export const MyComponent:FC<MyComponentProps> = props=>{
  return <div>hello react</div>;
}
export const MyComponent1:FC<MyComponentProps> = {className,style}=>{ // 参数结构
  return <div>hello react</div>;
}
复制代码

至关于

import React from 'react';
/**
 * 声明Props类型
 */
export interface MyComponentProps {
  className: string;
  style: React.CSSProperties;
}
export function MyComponent(props:MyComponentProps){
  return <div>hello react</div>;
}
复制代码

FC 类型来声明和直接用函数有什么区别呢？

In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent. 最后一句话，大多数状况下普通函数的形式就够了，若是想要更精准的 TypeScript 类型推断，就用 React.FC

具体使用什么，能够看我的习惯和团队代码风格。当咱们直接使用 FC 没法知足需求，这时候就使用函数组件（具体的场景没遇到过

函数式组件与类组件有何不一样？ => 推荐看（里面详细说了 hook 陈旧值的原由和解决方案

函数式组件与类组件在线区别 demo

React 组件设计实践总结 01 - 类型检查

简单说就是：函数式组件捕获了渲染所使用的值，不会获取到过新的数据

在 React 中 props 是不可变(immutable)的，因此他们永远不会改变。然而，this 并且永远是可变(mutable)的。

事实上，这就是类组件 this 存在的意义。React 自己会随着时间的推移而改变，以便你能够在渲染方法以及生命周期方法中获得最新的实例

因此若是在请求已经发出的状况下咱们的组件进行了从新渲染，this.props 将会改变。showMessage 方法从一个“过于新”的 props 中获得了 user。这也就是常说的闭包陈旧的问题，其实并非闭包陈旧，而是它自己就是这样的

函数式组件中想要渲染最新的值，那就在变化的时候在执行一次同样的操做。函数式组件捕获了渲染所使用的值这种写法是对的。

若是你可以很好的理解函数与闭包的知识，在学习react的时候能够看到不少不同的东西。完美的避开某些坑

react 组件颗粒化划分

1. 设计好的 ui 进行整个页面的简单布局

2. 根据 ui 划分组件层级

3. 肯定 ui 完整的最小颗粒化

4. 整理好理解划分好数据流的流动方向

代码更多地是给人看的。当你开始构建更大的组件库时，你会意识到这种代码模块化和清晰度的重要性。而且随着代码重用程度的加深，你的代码行数也会显著地减小。:)，少一行代码，就减小一个 bug 出现的可能性

原文连接，会保持一直更新，建议关注原文，最新更新