import React from "react";
  
  
  
  

  
  
  
  
export default class InlineFunctionComponent extends React.Component {
  
  
  
  
  render() {
  
  
  
  
    return (
  
  
  
  
      

  
  
  
  
        
Welcome Guest
  
  
  
  
         { this.setState({inputValue: e.target.value}) }} value="Click For Inline Function" />
  
  
  
  
      

 
 
 
 

  
  
  
  
import React from "react";
  
  
  
  

  
  
  
  
export default class InlineFunctionComponent extends React.Component {
  
  
  
  
  
  
  
  
  
  setNewStateData = (event) => {
  
  
  
  
    this.setState({
  
  
  
  
      inputValue: e.target.value
  
  
  
  
    })
  
  
  
  
  }
  
  
  
  
  
  
  
  
  
  render() {
  
  
  
  
    return (
  
  
  
  
      

  
  
  
  
        
Welcome Guest
  
  
  
  
        
  
  
  
  
      

使用 React Fragments 避免額外標(biāo)記

用戶創(chuàng)建新組件時(shí)，每個(gè)組件應(yīng)具有單個(gè)父標(biāo)簽。父級(jí)不能有兩個(gè)標(biāo)簽，所以頂部要有一個(gè)公共標(biāo)簽，所以我們經(jīng)常在組件頂部添加額外標(biāo)簽div

這個(gè)額外標(biāo)簽除了充當(dāng)父標(biāo)簽之外，并沒有其他作用，這時(shí)候則可以使用fragement

其不會(huì)向組件引入任何額外標(biāo)記，但它可以作為父級(jí)標(biāo)簽的作用，如下所示：

 
 
 
 

  
  
  
  
export default class NestedRoutingComponent extends React.Component {
  
  
  
  
    render() {
  
  
  
  
        return (
  
  
  
  
            <>
  
  
  
  
                
This is the Header Component
  
  
  
  
                
Welcome To Demo Page
  
  
  
  
            
  
  
  
  
        )
  
  
  
  
    }
  
  
  
  
}
 
 
 
 

事件綁定方式

在事件綁定方式中，我們了解到四種事件綁定的方式

從性能方面考慮，在render方法中使用bind和render方法中使用箭頭函數(shù)這兩種形式在每次組件render的時(shí)候都會(huì)生成新的方法實(shí)例，性能欠缺

而constructor中bind事件與定義階段使用箭頭函數(shù)綁定這兩種形式只會(huì)生成一個(gè)方法實(shí)例，性能方面會(huì)有所改善

使用 Immutable

在理解Immutable中，我們了解到使用 Immutable可以給 React 應(yīng)用帶來性能的優(yōu)化，主要體現(xiàn)在減少渲染的次數(shù)

在做react性能優(yōu)化的時(shí)候，為了避免重復(fù)渲染，我們會(huì)在shouldComponentUpdate()中做對(duì)比，當(dāng)返回true執(zhí)行render方法

Immutable通過is方法則可以完成對(duì)比，而無需像一樣通過深度比較的方式比較

懶加載組件

從工程方面考慮，webpack存在代碼拆分能力，可以為應(yīng)用創(chuàng)建多個(gè)包，并在運(yùn)行時(shí)動(dòng)態(tài)加載，減少初始包的大小

而在react中使用到了Suspense和 lazy組件實(shí)現(xiàn)代碼拆分功能，基本使用如下：

 
 
 
 

  
  
  
  
const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));
  
  
  
  
 
  
  
  
  
export const johanAsyncComponent = props => (
  
  
  
  
  }>
  
  
  
  
    
  
  
  
  
  
  
  
  
  
);
 
 
 
 

服務(wù)端渲染

采用服務(wù)端渲染端方式，可以使用戶更快的看到渲染完成的頁(yè)面

服務(wù)端渲染，需要起一個(gè)node服務(wù)，可以使用express、koa等，調(diào)用react的renderToString方法，將根組件渲染成字符串，再輸出到響應(yīng)中

例如：

 
 
 
 

  
  
  
  
import { renderToString } from "react-dom/server";
  
  
  
  
import MyPage from "./MyPage";
  
  
  
  
app.get("/", (req, res) => {
  
  
  
  
  res.write("");
  
  
  
  
  res.write("");  
  
  
  
  
  res.write(renderToString());
  
  
  
  
  res.write("