Reactjs系列一reactjs基礎知識

時間 2019-11-06

標籤 reactjs 系列基礎知識简体版

原文原文鏈接

前言

近幾年前端能夠說是飛速發展，從虛擬dom到flux單項數據流，這些對於前端能夠說是跨時代到發展，對於前端開發者來講不單單是挑戰也是大到機遇，若是你想成爲一名頂尖到前端開發工程師，那我認爲掌握這些概念和由此孕育而出到框架是必不可少的。anglurjs ，vuejs ，reactjs做爲當前前端三大主流框架，也許咱們工做中只會用到一種，但掌握他們，並能運用他們應該咱們必備但技能。注：本文只是本身重看reactjs文檔的一些總結，主要參考的是reactjs的官方文檔。html

reactjs基本語法

reactjs使用jsx語法有以下特色前端

標記與邏輯共同存放vue
經過大括號嵌入表達式node
jxs能夠看做一個表達式react
有效防止注入攻擊ios

詳細請點擊查看redux

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 只能影響樹中下方的組件。axios

狀態傳遞： 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以下所示：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>;
  }
}
複製代碼