React框架学习笔记

React学习笔记 前端框架

Quick Start

Introducing JSX

• embed any JavaScript in JSX by {}
• return 当中的JSX最好是在 ()当中写，避免自动插入分号而导致了错误
• JSX is an Expression too
• JSX当中，属性名使用驼峰的形式，除了 aria-*、data-*
• JSX就是 React.CreateElement 的语法糖

Render Element

ReactDOM.render(ele, mount)

Components and Props

=> component
    -> functional -> return JSX
    -> ES6 class (recommended)
=> component 只能返回一个根节点，即只返回一个 div，将其他都包含在div当中
=> props are read Only

state & lifeCycle

• state是组件自身的属性，private，由组件自己进行管理
  
  • state 必须在constructor 当中进行初始化
  • 通过 setState 来改变state
• lifecycle hook
  
  • componentDidMount
  • componentWillUnmount
  • componentWillUpdate
  • componentDidUpdate
  • ……
• 直接修改state的值，如 this.state.name = "comment"，react不会监听到变化

• state的修改有如下三个注意事项

  • 不可以直接修改state，而是要通过 this.setState({}) 来进行state相关属性值的修改

  • state的更新具有异步性

    • 不一定每次修改state就会马上产生变化，如果要依赖于之前的state进行赋值的话，不要修改当前的state的值，应当在 this.setState 当中传入 preState
      

      this.setState((prevState, props) => {
          this.state.name = prevState.name + 'nihaoya';
      })

  • state会根据key值进行局部的更新

Handling Events (on + EventName)

• Concept
  
  • named using camelCase (eg: onClick)
  • pass a function as event handler

• 写事件绑定的时候记得绑定this

  • 推荐是在constructor 当中 进行 this 的绑定
    

    constructor () {
        this.handleClick = this.handleClick.bind(this)
    }
    // es7
    handleClick: () => {
        // do something
    }

Conditional Rendering

• 通过 if 去选择渲染的部分 (low 爆了)
• 使用 JSX 的判断条件，JSX 对于 undefined、null、boolean 默认是 ignore，只会判断其 true | false

{ isI18n && 
    <div>
        ...
    </div>
}

List and Keys

• JSX 可以获得 list 进行渲染
• 在list 当中，每个item 都需要一个特定的key，最好是 string 类型的，因为有key，react 能够通过key 来计算是否需要更新

class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
         const listItems = numbers.map((number) =>
            <li key={number.toString()}>
                {number}
            </li>
        );
        return (
            <ul>
                {listItems}
            </ul>
        )
    }
}

Forms

• controlled Components （通过事件去把值存在state当中，自己控制表单组件的值）
  
  • mutable 的变量都放到 state 当中
  • input、textarea、select 都是通过其 value 来获取数据
  • select 的默认选中是写在 select 的value 当中，而不是 option
• 如果需要一个 handler 去处理多个表单组件，可以给每一个表单控件加上 name 属性，通过 event.target.name 来区分是哪个表单组件发出的变化，并且做相对应的处理

Lifting State Up

• 父与子之间的通信 => 通过 props 来实现
• 子 -> 父。 通过调用父组件当中的方法来进行 父组件state的变化，即callback 的形式
• 子组件之间如果有共享的变量时，将其提升至最近的共同的父组件当中进行处理，即 source of truth，保持数据的 top-down data flow

Composition vs Inheritance

• 在组件中，return的 div 下写上 {this.props.children}，这样在调用组件的时候，可以在组件两个闭合标签当中写任何东西，都会被映射过去，有点类似于 vue 的 slot
• 也可以把组件当成 props 传递过去给另外一个组件，不推荐这么做。
• 推荐就是通过 composition 的方式，即在组件标签当中添加内容来复用 组件的一些公用的代码，不推荐使用 继承的方式，拓展性还是不够。

Thinking in React

• 做之前，一定要先系那个清楚组件清单，分好组件再动手，这样可以决定数据的流动方式
• 确定好哪些值是 props or state，如果有state，最好是采取 lifting state up，将state的管理都放在父组件当中，children 只需要获取需要的值即可

Advanced Guide

JSX in depth

• JSX 是 React.createElement 的语法糖
  
  • React.createElement(component, props, children)
• user-defined component must be capitalized
• if no value for prop，只是声明了，但是没有赋值，传到组件里面去了
  
  • default to true
• spread attributed
  
  • es7 {...props}
• boolean、undefined、null are ignored but can run
  
  • 只会判断其 true | false

Typechecking with PropsType

• build-in propschecking
  
  • 'props-types'
• use TypeScript to check (recommended)

• component.defaultProps

  • eg
    

    class Test extends React.Component {
        // do something
    }
    Test.defaultProps = {
        name: 'Bob'
    }

Refs and the DOM

• React提供的一个引用，可以直接操作DOM，如果绑定在组件上，则会这个组件的引用，
• ref 只有在 纯DOM 或者 class 组件上起作用
• 可以通过 ref 来获取子组件的DOM，并且进行操作，但是不建议，组件内的状态由组件自己管理，最好不要在外修改子组件的元素

// Parent 当中 this.textInput 直接为 子组件的 所绑定的引用 Input
class Parent extends React.Component {
    constructor (props) {
        super(props);
    }
    render () {
        return (
            <Children inputRef={(input) => this.textInput = input}></Children>
        )
    }
}
class Children extends React.Component {
    constructor (props) {
        super(props);
    }
    render () {
        return (
            <div>
                <input ref={this.props.inputRef} value="sdasd">
            </div>
        )
    }
}

Uncontrolled Component(不建议使用，不好维护)

• 如果通过state 来管理自身的表单的组件的值的变化，我们称之为 controlled component，如果值的变化由元素自身跟踪变化及响应，称之为 uncontrolled component
• 如果使用uncontrolled component 的话，在提交表单的时候，可以通过引用的方式去获取input 的值

class Parent extends React.Component {
    constructor (props) {
        super(props);
    }
    handleSubmit () {
        this.textInput.value // 111
    }
    render () {
        return (
            <input ref={(input) => {this.textInput = input}} value="111">
            <button onSubmit={this.handleSubmit}></button>
        )
    }
}

但是我们推荐使用 controlled component，有如下的几个原因

• 通过state能够实时取到他的value值，并且在改变之后就能够立马进行验证其合法性
• 可以控制提交按钮的可用性，判断所有数据合法才开启其提交功能
• 可以通过state强制限制Input的输入格式

Optimizing Performance

• diff算法（virtual DOM）
• 更新主要通过 shouldComponentUpdate 返回的 boolean 来判断是否需要组件的更新
• 在操作state的时候，最好是 Pure操作，即不要修改原来的state，而是返回一个新的对象

return Object.assing({}, state, payload)

React without ES6

主要是通过React提供一些原生的接口，比如 React.createElement 等去实现 es6 中的语法能实现的东西，更多详情可以直接去官网看

React Without JSX

没有JSX支持的话，就用回 React.createElement，JSX就只是其一个语法糖。

Reconciliation

• compare the root elemtn first
  
  • 不论什么时候，如果根元素就不一样了，那么整个树都需要 re-render
• 每个元素有一个key，特别是数组遍历的时候，一定要手动加上 key，diff会根据 key去辨别某个组件是否需要更新
  
  • key 只需要在 兄弟节点 当中唯一即可，不需要全局唯一
  • key 最好是稳定的，因为如果同一个元素的key不断变化，会导致组件失去其 state，并且做了额外的渲染

Context

• won't pass the props down manually at every level, use the context API，能直接传数据到子组件当中
• 推荐使用 Redux | Mobx

Web Component (了解即可)

Higher-Order Components

• a higer-order component is a function that takes a component and returns a new comonent
• 使用的场景主要是一些共用的处理数据逻辑的时候，能够使用 higher-order component 抽象出来，类似于 vue 当中的 mixins
• 对于传入的 component，不要修改其任何东西，只是将数据传给他就号了
• convention
  
  • pass unrelated props through to wrapped component (将无关的属性也传下去给组件)
  • maximizing composability (最大化组合性)
  • wrap the display name for easying debugging

Intergrating with Other Libraries

• 如果第三方插件改变了DOM，React 是无法感知的，不会 re-render

Accessibility(可用性)

主要是使网站能够给各种人用，官网里面有挺多有用的建议，可以去看，很多资源。主要是涉及 ·aria-*· 的相关属性

Reference(一些引用、接口等)

React Top-level API

• components
  
  • extends React.Component or React.PureComponent
• react element
  
  • using JSX(recommended)
  • React.createElement
• transforming elements
  
  • cloneElement
  • isValidElement
  • React.Children，主要是用来处理 this.props.children
    
    • React.Children.map(children, func)
    • React.Children.forEach(children, func)
    • React.Children.count(children)
    • React.Children.Only(children)
    • React.Children.toArray(children)

React.Component的一些 lifecycle

• mounting
  
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
• updating
  
  • componentWillReceiveProps()
    
    • calling this.setState 不会触发这个阶段
  • shouldComponentUpdate()
    
    • 如果返回 false，后面几个状态都不会触发
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
• unmounting
  
  • componentWillUnmount()

other API: setState()、forceUpdate()
class properties: defaultProps、displayName
instance properties: props、state

ReactDOM (import ReactDOM from 'react-dom')

• provide DOM-specific methods that can be used at the top of ur app
• API
  
  • ReactDOM.render()
  • ReactDOM.unmountComponentAtNode()
  • ReactDOM.findDomNode()
    
    • 不推荐使用，不如直接使用 ref

ReactDOMServer (import ReactDOMServer from 'react-dom/server')

主要是在服务端去使用react进行渲染成页面

• renderToString()
• readerToStaticMarkup()
  
  • 和 renderToString 差不多，不过其差别在于不会给组件添加 data-reactid

DOM Elements

• all DOM properties and attributes should be camelCased except aria-* and data-* should be lowercased
  
  • className
  • maxLength
  • ……

• style 属性

  • accepts a JS object with camelCased property
    

    <div style={{color: red, backgroundColor: black}}></div>

SyntheticEvents (人为定义事件)

• 在 capture 阶段进行捕获
  
  • onClick
  • onClickCapture
• 在官网当中可以看各种 event 的介绍，properties 指的是 event.target.* 当中的 * 的内容

Test Utilities

常用的一些测试库： Jest、anzyme、Mocha等等

Shallow Renderer

写测试时，shallow rendering很有用，可以一步步的控制渲染

• 即把 render过程拆成一步步执行，不用管 children 是什么
  
  • shallowRenderer.render()
  • ****.getRenderOutput()

自测结果

创建集群

• 创建集群

  • 第一步：集群信息
    
    • 新增 集群新增资源所属项目 字段
    • 下拉框处，灰色文字提示 集群内新增的云主机、负载均衡器等资源将会自动分配到该项目下
      
      • 下拉框当中显示 全部项目组
    • 不选择所属项目时，点击下一步
      
      • 下拉框 红框提示
      • 无法跳转到 第二步：选择机型
      • 重新选择项目后，动态检查其合法性，合法则取消 红色框提示
    • 选择所属项目后，记录所选的项目组的 projectId，代码当中具体key值为 projectSelection
    • 从第二步、第三步返回时，下拉框显示此前已选的项目
  • 第二步： 选择机型
    
    • 无变动，正常显示
  • 第三步：云主机配置
    
    • 根据第一步所选项目，列出 ssh密钥
    • 根据第一步所选项目，列出相对应的 安全组策略
    • 点击下一步，跳转至 集群页，成功创建集群

• 集群详情页

  • 新增 集群新增资源所属项目
  • 根据 projectId 回显 项目名称
  • 气泡提示 集群内新增的云主机、负载均衡器等资源将会自动分配到该项目下
  • 允许修改 icon
    
    • 点击 icon
      
      • 弹框显示 修改 新增资源所属项目
      • 不选择新项目，点击提交时，下拉框 显示为红色，并且不可提交
      • 选择与原项目相同的项目，下拉框显示为红色，并提示 请选择与原项目不同的项目
      • 点击取消，弹框消失，页面不重载
      • 选择新项目合法，点击提交，向后台发送修改新增资源所属项目 请求，接口为 ModifyProjectId
        
        • 成功，弹框消失，详情页页面重载，重新拉取集群详细信息，显示修改后的 项目名称
        • 失败，显示失败信息

• 扩展节点页

  • 新增 集群新增资源所属项目
  • 气泡提示
  • 项目名称

• 负载均衡页面修改为 Ingress 页面

  • 标题修改为 Ingress
  • 删除TCP/UDP 四层协议，tab页不保留
  • 新增提示 Ingress 是用于将外部 HTTP(S) 流量路由到服务（service）的规则集合。 更多说明
    
    • 点击更多说明，跳转至 帮助文档
  • ingress相关信息展示table
    
    • 负载均衡名称字段修改为 ingress名称
    • 新增字段 类型
      
      • lb的唯一ID
      • 应用型负载均衡
    • 点击 ingress名称
      
      • 跳转至 ingress 详情页
        
        • 新增描述字段，并展示描述内容
          
          • 若无描述内容，则显示为 "无"
        • 页面重构，转交至 重构组
    • 点击 lbID
      
      • 跳转至 lb 详情页
  • 新建
    
    • 新增 ingress描述 字段
    • ingress 描述字段 为 非必填
• 创建服务页面，修改提示和说明
  
  • 提供公网访问方式 提示内容的修改