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 避免额外标记

用户创建新组件时，每个组件应具有单个父标签。父级不能有两个标签，所以顶部要有一个公共标签，所以我们经常在组件顶部添加额外标签div

这个额外标签除了充当父标签之外，并没有其他作用，这时候则可以使用fragement

其不会向组件引入任何额外标记，但它可以作为父级标签的作用，如下所示：

 
 
 
 

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

事件绑定方式

在事件绑定方式中，我们了解到四种事件绑定的方式

从性能方面考虑，在render方法中使用bind和render方法中使用箭头函数这两种形式在每次组件render的时候都会生成新的方法实例，性能欠缺

而constructor中bind事件与定义阶段使用箭头函数绑定这两种形式只会生成一个方法实例，性能方面会有所改善

使用 Immutable

在理解Immutable中，我们了解到使用 Immutable可以给 React 应用带来性能的优化，主要体现在减少渲染的次数

在做react性能优化的时候，为了避免重复渲染，我们会在shouldComponentUpdate()中做对比，当返回true执行render方法

Immutable通过is方法则可以完成对比，而无需像一样通过深度比较的方式比较

懒加载组件

从工程方面考虑，webpack存在代码拆分能力，可以为应用创建多个包，并在运行时动态加载，减少初始包的大小

而在react中使用到了Suspense和 lazy组件实现代码拆分功能，基本使用如下：

 
 
 
 

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

服务端渲染

采用服务端渲染端方式，可以使用户更快的看到渲染完成的页面

服务端渲染，需要起一个node服务，可以使用express、koa等，调用react的renderToString方法，将根组件渲染成字符串，再输出到响应中

例如：

 
 
 
 

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