初识React

前言

开始实习后公司技术栈是偏React的，提及来也是惭愧，一个学前端的小崽崽竟然这么久都没有用过，这几天开始学习了一下其实我的感受React仍是比Vue用的舒服一些(理解层面上)，提及来毕竟前者的维护社区团队但是脸书呀。好了废话很少说了总结一下React基础(结合官网顺序，附带上本身的一些理解作个记录，后面也包括hook)，我尽可能每个点都附上一个案例这样能够更好的理解。

JSX

js的一种扩展语法，简单来说有了这种拓展语法的支持咱们就能够在js中直接书写html代码。咱们后面知道React就是基于.js文件不像Vue中html部分有专门的包裹，因此JSX在这之中确定是可以用到的。

const el = <div>我是一个JSX对象</div>
复制代码

元素渲染

React 怎样将你所写渲染到界面上？

咱们结合 ReactDOM.render() 方法链接DOM与咱们的React元素。

// html中<div id="root"></div>
const el = <div>我是一个JSX对象</div> ReactDOM.render(el, document.getElementById('root')); 复制代码

怎样更新渲染？

更新渲染时内部会有一个比对，得出结果后就只更新有修改的一部分，这一部份内部原理重要性可想而知，小编先放一下后续看源码在去写一下

组件建立

构造函数组件

function Show(props) {
 return <h1>Hello, React</h1>; } 复制代码

class组件

class Show extends Render.Component {
 render(  return <h1>Hello, React</h1>;  ) } 复制代码

参数传递

这里是我以为比较舒服的一个点，咱们经过 props 进行参数传递，他不止能够拿到咱们从父组件传递过来的值，一样能够拿到 JSX 所定义属性，props 是不可改变的。

function Show(props) {
 return <h1>Hello, {props.name}</h1>; } const el = <Show name="sichen"/> 复制代码

state

私有变量要用到他的话咱们要以class声明到内部使用，state是没法直接更改的，咱们只能经过setState()对他进行一个更改，构造函数是惟一能够给 this.state 赋值的地方。

class Show extends Render.Component {
 constructor(props) {  super(props);  this.state = {  name: 'sichen'  }  }  render(  return <h1>Hello, {this.state.name}</h1>;  ) } 复制代码

同时也要注意到的一个点是，this.props 和 this.state 可能会异步更新，因此在setState()中最好不要直接去改props的值。咱们能够经过参数传递实现

this.setState((state, props) => ({
 counter: state.counter + props.increment })); 复制代码

state 向下传递

生命周期

毫无疑问生命周期无疑是都是框架内最为重要的点

React中生命周期主要是分为三大块，下面也放上了每一块对应的一些方法

• Mounting：插入真实 DOM

  • componentWillMount()
  • componentDidMount()

• Update：从新渲染

  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)

• Unmount：移出真实 DOM

  • componentWillUnmount()

事件处理

<!-- fn为绑定的事件方法 -->
<button onClick={fn}>  Activate Lasers </button> 复制代码

咱们这边要注意一下咱们日常实际情景上在内部定义方法后都有回调将方法丢出去，this指向问题要注意一下一般咱们直接用箭头函数就行了

<!-- fn为绑定的事件方法 -->
<button onClick={() => this.fn}>  Activate Lasers </button> 复制代码

实际案例

这边放上一个请求数据的一个案例，有结合到生命周期那一块就比较贴合。从数据请求到拿到数据的界面显示。

<!-- jquery部分和React已导入的，未附上 -->
<div id="example"></div>  <script type="text/babel">  class RepoList extends React.Component {  constructor(props) {  super(props)  this.state = {  loading: true,  error: null,  data: null  };  }   componentDidMount() {  this.props.promise.then(  value => this.setState({loading: false, data: value}),  error => this.setState({loading: false, error: error}));  }   render() {  if (this.state.loading) {  return <span>Loading...</span>;  }  else if (this.state.error !== null) {  return <span>Error: {this.state.error.message}</span>;  }  else {  var repos = this.state.data.items;  var repoList = repos.map(function(repo, index) {  return (  <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>  );  });  return (  <main>  <h1>Most Popular JavaScript Projects in Github</h1>  <ol>{repoList}</ol>  </main>  );  }  }  }   ReactDOM.render(  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,  document.getElementById('example')  ); 复制代码

总结

这个案例里面就涵盖了挺多的也比价符合实际案例，感受总体看下来应该会比较有收获。这边的话主要就是对 React 基础部分作了一个整理，应该仍是有些遗漏的。后续会在进行整理。