前言

近几年前端可以说是飞速发展，从虚拟dom到flux单项数据流，这些对于前端可以说是跨时代到发展，对于前端开发者来说不仅仅是挑战也是大到机遇，如果你想成为一名顶尖到前端开发工程师，那我认为掌握这些概念和由此孕育而出到框架是必不可少的。anglurjs ，vuejs ，reactjs作为当前前端三大主流框架，也许我们工作中只会用到一种，但掌握他们，并能运用他们应该我们必备但技能。注：本文只是自己重看reactjs文档的一些总结，主要参考的是reactjs的官方文档。

reactjs基本技能思维导图

reactjs基本语法

reactjs使用jsx语法有如下特点

标记与逻辑共同存放
通过大括号嵌入表达式
jxs可以看作一个表达式
有效防止注入攻击

详细请点击查看

reactjs元素渲染

reactjs只能通过ReactDOM.render()将react元素渲染到dom元素中

条件渲染：通过if 或者条件运算符去创建元素来表现当前的状态例：

function HelloWorld(props) {
   const isLoggedIn = props.isLoggedIn;
   if (isLoggedIn) {
       return <p>hello world</p>;
      }
    return <p>not login</p>;
   }

列表渲染与key:使用map()函数来渲染数组例：

      const numbers = [1, 2, 3, 4, 5];
      const listItems = numbers.map((number) =>
         <li>{number}</li>
      );

组件间的状态

状态：react的整个组件可以看成一个状态机，通过与用户的交互来改变状态，实现ui的更新，及React 里，只需更新组件的 state，然后根据新的 state重新渲染用户界面（不要操作 DOM），这也是flux单向数据流思想的一种体现。看个例子

import  React from 'react'
class Clock extends React.Component {
 constructor(props) {
   super(props);
   this.state = {date: new Date()};
 }

 tick() {
 //通过setstate来改变状态
   this.setState({
     date: new Date()
   });
 }

 render() {
 //将状态渲染到ui页面
   return (
     <div>
       <h1>Hello, world!</h1>
       <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
       <button onClick={this.tick.bind(this)}>更新时间</button>
     </div>
   );
 }
}

注：reactjs中的状态可以称为自顶向下或单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

状态传递： reactjs组件的状态传递主要通过props，props与state的最大不同是props是不可以改变的。另外也可以理解为是自组件用来接受父组件中传递的属性。

class WebSite extends React.Component {
  constructor() {
      super();
      this.state = {
        name: "菜鸟教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
class Name extends React.Component {
  render() {
    console.log(this.props)
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}

reactjs生命周期简介

reactjs生命周期可以分为 mount update destroy每一个生命周期对应的api如下所示：

mount：

1. constructor()
1. static getDerivedStateFromProps()
1. render()
1. componentDidMount()

update：

1.static getDerivedStateFromProps()
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate()
5.componentDidUpdate()

destroy：

1.componentWillUnmount()

事件与表单

React 元素的事件处理和 DOM 元素类似。但是有以下两点注意:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 表单元素与 React 中的其他 DOM元素有所不同,表单中可变的状态保存在state中并且只能通过setstate来更新

class HelloMessage extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello Runoob!'};
      this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  render() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }
}

reactjs生态相关

create-react-app：reactjs脚手架用来构建项目的基本架构
mobx/redux：状态管理工具
react-router：完整的react路由解决方案
ant-design：阿里开源的reactjs ui库
axios: 基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

小结

本章主要介绍了reactjs的基本内容，主要参考了reactjs的官方文档。建议初学者完整的把reactjs的官方文档看几遍，注意不是看一遍。如果你能坚持多看几遍，并且在看的过程中写几个demo那你上手项目将非常快。

前端知识库Reactjs基础系列一

前言