Reactjs系列一reactjs基础知识

前言

近几年前端能够说是飞速发展，从虚拟dom到flux单项数据流，这些对于前端能够说是跨时代到发展，对于前端开发者来讲不单单是挑战也是大到机遇，若是你想成为一名顶尖到前端开发工程师，那我认为掌握这些概念和由此孕育而出到框架是必不可少的。anglurjs ，vuejs ，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()
• 2. static getDerivedStateFromProps()
• 3. render()
• 4. 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那你上手项目将很是快。