初识React

疾_风
480 阅读4分钟

前言

开始实习后公司技术栈是偏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 基础部分做了一个整理，应该还是有些遗漏的。后续会在进行整理。

avatar
文章
阅读
粉丝