前言

亲爱的jym，好久不见了，最近写文章还是一两个月前了，一个月前还一直都处于一个 投简历 -> 面试 -> 复盘看面试题 的状态。可谓是“艰苦”啊，记得在刚过完中秋节的那个星期里，也就是九月下旬，hr估计都还沉浸在中秋的喜悦里，无法自拔，忘记了还有这么多正在投简历的同学呢。。。

当时由于着急，秋招已过大半，草草的就接收了深圳一家公司的实习offer（当保底），给了一个最后的入职期限，这公司money给的不多，还不包饭，这是要倒贴的节奏啊。心有不甘的我，在接下来的一两个星期里疯狂投简历，面试，看面经，争取能找到一家别让我倒贴的公司。后来也算是如愿以偿了，在国庆时也算是玩了一个假期，毕竟国庆后就要入职了。也正因为这段时间的松懈，导致后面的百度、字节二面（一面轻松，二面些许紧张，也可能是无缘大厂吧），纷纷败下阵来。

今天是入职后的第三个星期，在北京，有周末无聊的可以一起约爬山啥的，交个朋友。

今天就简单的介绍了一下我的求职和入职的过程，接下来顺便把在公司没需求的时候，写的React学习文档分享给大家。让大家在看我叭叭的时候，能够学到一些知识，本文是对React由浅入深的学习，后续会更新一些更深入的React知识点（都是我在项目内看到的）。

正文了解React是什么？

首先React是一个用于构建用户界面的javascript库，前端React是指React.js，是Facebook推出的一个用于构建用户界面的JavaScript库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。它通过Virtual DOM和diff算法提高性能，支持单向数据流。

React的几个核心概念：JSX

JSX实际上是JS的一个语法拓展，一般建议React搭配使用JSX语法，它可以很好的描述一个UI呈现的本质交互形式。下面这就是一个jsx。

JSX存在嵌入表达式：即可以在这个JSX语法内动态绑定一些元素。就像这样：

    const name = 'Josh Perez'; 
    const element = 
Hello, {name}
;

我们在 JSX 语法中，你可以在大括号内放置任何有效的。例如，2 + 2，user.firstName或formatName(user)都是有效的 JavaScript 表达式。

JSX可以作为一个变量赋值，也可以作为函数的返回值去使用。其语法中的属性值，可以使用"",也可以使用{ }进行赋值。

元素的渲染

想要让一个JSX元素在页面上渲染，你需要一个由ReactDOM.createRoot()函数创建React的根节点，然后在根节点上调用render()函数进行渲染。

    const root = ReactDOM.createRoot(
        document.getElementById('root')
    ); 
    const element = 
Hello, world
; 
    root.render(element);

这里的element 也是 React的一个简单元素：与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。如果想要更新已经渲染的元素：实际上React元素是不可变对象，他就像一个单帧，一次只放映一次。大多数 React 应用只会调用一次root.render()。

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容。（这个和React虚拟DOM有关）

组件和Propsclass组件：

class Welcome extends React.Component {
// 初始数据 或 接收属性值参数等
   constructor(){}
// methods     
    render() {
      return 
Hello, {this.props.name}
;     
    } 
 }
 ```   

组件的渲染一般都是使用render去渲染，或者在class组件内使用render函数去返回JSX元素。

Props：

组件无论是使用，都绝不能修改自身的 props。这里要注意React的一个严格的规则，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

它的使用就是这样的：

在class组件中，使用this.props获取组件属性参数。

而函数组件，直接在函数上 传入一个唯一的props属性参数。

想要实现一个持续的页面渲染，我们就可以通过声明周期的执行时间，去设置循环触发的定时器，然后在回调函数内调用setState函数去修改当前组件的状态，只要当前组件的状态发生了改变，该组件内的render函数就会重新触发，达到持续渲染的页面。

当你调用setState()的时候，React 会把你提供的对象合并到当前的 state。

事件处理机制

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

而在class组件内，可能复杂一点：它需要在构造函数内注册并修改this的指向。（为了方便还可以在定义方法时，使用箭头函数）

条件渲染

条件渲染就是可以在JSX语法内加入{ } ，在大括号内加入javascript语句都可以。

 render() {
     const isLoggedIn = this.state.isLoggedIn;
     let button;    
     if (isLoggedIn) {      
         button = onClick={this.handleLogoutClick} />;    
      } else {      
          button = onClick={this.handleLoginClick} />;    
      }
      return (
          
        
              isLoggedIn={isLoggedIn} />        
              {button}      
          
       );
}

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
        <div>      
            <h1>Hello!h1>      
            {unreadMessages.length > 0 &&        
                <h2>          
                    You have {unreadMessages.length} unread messages.        
                h2>      
             }    
         div>
     );
}

想要阻止组件的渲染，只需让render方法直接返回null，而不进行任何渲染。

列表&Key

在组件中渲染列表，通常都是使用数组保存数据对象，然后使用数组的map方法，遍历所有的数据对象，类似于项目内的数据初始化这样。

然后在表组件内渲染这个数据可以了。也就是说，渲染一个列表我们通常会使用数组加map方法的方式去实现：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
        {number}
    li>
  );
  return (
    <ul>{listItems}ul>
  );
}

展示列表时需要加入唯一key属性值，一个好的经验法则是：在map()方法中的元素需要设置 key 属性。

为什么要对列表组件加入唯一key？

主要还是由于这样可以提高React的diff算法查找和复用的效率，可以更精确的找到要更改的DOM节点。

表单的使用

表单内的组件一般被看为是受控组件。

在 HTML 中，表单元素（如、和）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

form组件可以随时通过受控组件内的input输入，以及当前state所存储的表单数据。

状态的提升

由于React是单向数据流，且组件内的state都是独一无二的，它不被其他组件共享，所以当我们需要让子组件的状态被父组件所利用，这个时候就可以使用状态的声明提升方法。我们可以让子组件不使用state去存储传入组件的数据，而是直接使用参数的数据props.data。 在发生修改操作时，使用props.onxxxChange()方法，并将改变了的数据作为参数传回。

React的高级用法：

常用的几种React钩子函数：

useReducer：可以代替useState实现更复杂的状态管理

useMemo：

如果没有提供依赖项数组，useMemo在每次渲染时都会计算新的值。

结尾

好了，今天的分享就到这里吧，这些只是React的一些核心概念，后续会接着看React的高级用法，感谢友友的观看，能看到这里已经很棒了。最后借用今天一个朋友的话来说，实习offer不是正式offer，所以这不是终点，还需要努力学习，寻找机会、把握机会，然后才能上岸！！！