React 总结初稿一

18 年转眼即逝，不同寻常的一样。这一年我毕业了，入坑前端。工作只用 vue ，自己又学了 react , TypeScript ,小程序，这些在工作中从未用到过。会一个框架没有用，会几个框架也没有用，能够在不同的业务解决不同的问题才是精华所在。我们最终都是要归根于公司的，公司用什么我们学什么，入职这家公司用这个我们学这个，入职那家公司我们学那个。工作需要什么我们学什么，框架说到底都是库，死磕文档就好了（大佬说的），道理是这样的。

但是为什么我还是要去学那么多呢？我刚刚毕业，学习是最主要的。但缺乏在工作中的使用，有些东西学了很快就忘记了，学我也只是学到了一点皮毛，一些语法，无济于事，我是不是多此一举呢？我也曾经这样怀疑过自己，我也很无奈。脑海里回荡起领导说的一句话：我们在这家公司工作是为了下家工作做准备的，学到东西是重点，不要认为没有用（领导是 java，曾教我Linux系统简单命令）。技多不压身，闲着也是闲着，学点东西以后扯皮用，说不准哪天工作需要或者说换家公司换技术栈了，面对各种情况都能够快速入手，因为曾经学习过，因为随时准备着，不慌。

`JSX`

react 推荐使用的是 JSX 语法；通过 react 编译他会把JSX 解析成 JavaScript 表达式

简单语法

const name = 'Josh Perez'
const element = <h1> Hello {name} </h1>
复制代码

把元素标签拿出来，写成常量，标签内还可以接受变量，如上所示例子；既然他是 JavaScript 表达式，那么就可以在 if 或者 for 循环中使用了

function GetGreeting(user) {
  if (user) {
    return <h1> hello world </h1>
  }eles {
    return <h1>hello sunseekers</h1>
  }
}
复制代码

JSX 是把元素标签赋值给一个常量，那么元素标签应该有的属性他都存在，就和我们平时使用元素一样；

const element = <div tabIndex = '0'></div>
const img = <img src={https://reactjs.org/docs/introducing-jsx.html}/>
复制代码

组件名称总是大写字母开始，为了区分组件和 DOM 标签我自己简单粗暴的理解 JSX 就是用 js 的形式把 html 搬移过来，拥有 javaScript 和 html 原来所拥有的，然后 react 帮助你去解析在项目中的使用

react 里面大量使用 ES6 的语法书写，如果你 ES6 不太熟悉，我建议你去了解一下。对于 ES6 的相关知识一笔带过。

既然我们了解了 JSX 的简单语法，那么在项目中如何使用呢？

组件

首先声明一点在 react 里面分为有状态组件（有 class 的）和无状态组件或者说函数式组件（有 function ）

无状态组件 ( 函数式组件 )

function Welcome(props) {//定义数据来自父组件传递
  return <h1> Hello {props.name} </h1>
}
复制代码

有状态组件

class Welcome extends React.Component {
  construction(props){//构造函数优于任何函数，会被自动执行的函数，所有class都有的函数
    super(props)//调用父类
    this.state = {//定义数据需要把数据放在状态里面（this.state就是这个组件的状态）
      name: 'sunseekers'
    }
  }
  render() { //当组件的state或者props（因为props的值来自state）发生改变的时候，render函数就会重新执行
    return <h1>hello, {this.state.name}</h1>
  }
}
复制代码

有状态组件和无状态组件的区别：

无状态组件里面没有内置 react 的生命周期函数更加纯粹，轻便相对而言性能会更好。

有状态组件继承 react.Component ，它默认内置了一些生命周期函数（唯独没有内置render生命周期函数函数）所以我们要在写组件的时候一定要写这个生命周期函数否则会报错。

具体需求具体使用，一般情况当我们的组件里面没有复杂逻辑，数据传递我们可以尝试使用，当一个组件只有 render() 生命周期的时候，我们完全可以用一个无状态组件来替换。下面是无状态组件和有状态组件

生命周期函数是指在某一时刻组件会自动调用执行的函数

State

React 很灵活，但是它有一条严格的规则 reducer() 生命周期函数( 或者说 react 组件 ) 必须是纯函数（纯函数，给固定的输入，就一定会有固定的输出，而且不会有任何副作用，不允许修改自身的 props ，在案例中我们要修改数据都借助 state 状态

state 里面的数据我们不能直接修改，直接修改并不会重新渲染一个组件，我们需要借助 setState() ( 状态更新是异步的，解决这个问题我们常常在 setState 里面调用函数，函数接受两个参数，一个是更新前的一个是更新后的；不建议 setState 里面使用对象的形式,所以我就没有举例 )

细心的朋友一定发现了，在案例中我们使用了循环渲染。通过使用数组的 map，在 react 里面可以使用条件渲染，循环渲染。react 中一个 {} 表示是一个 js 表达式，{{}}这种，外层表示 js 表达式，内层是 js 对象；

条件渲染也很简单，就和我们平常写js一样

if 案例

在vue中，表单的绑定实时渲染是作者帮我们封装好了，我们直接使用就好v-model，但是在react中，需要我们自己去写。自己写也是很简单的，在上面的例子里面我们已经写过了，不相信可以翻上去看看，哈哈

父组件给子组件传递数据是单项的，通过props ,如果子组件要修改父组件的数据，只能通过子组件触发父组件的方法在父组件里面修改，子组件是不能直接修改的，在 vue 和 react里面都是一样的，只是语法不一样。上面有一个例子讲到了，还特意解释了一下想知道翻上去看一看

react 简单的就到这里，路由呀，中间件呀，等我学到那里在来说吧。我是初学者请多多指教，有什么写的不对或者不好的欢迎评论指出。案例DEMO

JSX

组件

State

猜你喜欢

`JSX`