React.js小书总结

(迁移自旧博客2017 08 27)javascript

<h1>第一阶段</h1>前端

react的组件至关于MVC里面的View。

react.js 将帮助咱们将界面分红了各个独立的小块，每个块就是组件，这些组件之间能够组合、嵌套，就成了咱们的页面。

react.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决咱们全部的问题，须要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。

java

组件化能够帮助咱们解决前端结构的复用性问题，整个页面能够由这样的不一样的组件组合、嵌套构成。

react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，而且渲染到页面上。

在 JavaScript 写的标签的”语法叫 JSX。JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并非 HTML。

JSX 其实就是 JavaScript 对象。JSX 在编译的时候会变成相应的 JavaScript 对象描述。

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

ReactDOM.render 功能就是把组件渲染而且构造 DOM 树，而后插入到页面上某个特定的元素上（在这里是 id 为 root 的 div 元素）。react

render 方法必需要返回一个 JSX 元素，必需要用一个外层的 JSX 元素把全部内容包裹起来。返回并列多个 JSX 元素是不合法的。

直接在JSX中加入if语句会渲染出无效的javascript。

能够这么写，当即执行函数： { ( ()=>{ if ( i = 0){ ... } } ) ( ) }

<div>
  <Title /> //Title组件
  <Title />
  <Title />
</div>

自定义的组件都必需要用大写字母开头，普通的 HTML 标签都用小写字母开头。redux

on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。

通常在某个类的实例方法里面的 this 指的是这个实例自己。

下面这两种方法均可以绑定事件监听：设计模式

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick = {this.handleClick.bind(this)}>DOG</div>)
  }
}

注意return以后的代码。架构

class Dog extends Component {
  bark () {
    console.log('bark')
  }
  
  run () {
    console.log('run')
  }
  
  handleClick(){
    this.bark();
    this.run();
  }
  
  render () {
    return (<div onClick = {()=>{this.handleClick()}}>DOG</div>)
  }
}

咱们要改变组件的状态的时候，不能直接用 this.state = xxx 这种方式来修改，若是这样作 React.js 就没办法知道你修改了组件的状态，它也就没有办法更新页面。因此，必定要使用 React.js 提供的 setState 方法，它接受一个对象或者函数做为参数。app

...
  constructor (props) {
    super(props)
    this.state = {
      name: 'Tomy',
      isLiked: false
    }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
...

注：上述方法不会当即更新，不能够作后续运算。 setState的第二种使用方式：框架

...
  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
    // 最后的结果是 this.state.count 为 3
  }
...

在使用 React.js 的时候，并不须要担忧屡次进行 setState 会带来性能问题。dom

List item每一个组件均可以接受一个 props 参数，它是一个对象，包含了全部你对这个组件的配置。

默认配置 defaultProps。

props 一旦传入进来就不能改变。

state 是让组件控制本身的状态，props 是让外部对组件本身进行配置。

在 React.js 处理列表就是用 map 来处理、渲染的。

若是一个文件导出的是一个类，那么这个文件名就用大写开头。四个组件类文件导出都是类，因此都是大写字母开头。

当某个状态被多个组件依赖或者影响的时候，就把该状态提高到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。

React.js 控制组件在页面上挂载和删除过程里面几个方法：

componentWillMount：组件挂载开始以前，也就是在组件调用 render 方法以前调用。

componentDidMount：组件挂载完成之后，也就是 DOM 元素已经插入页面后调用。

componentWillUnmount：组件对应的 DOM 元素从页面中删除以前调用。

咱们能够给任意表明 HTML 元素标签加上 ref 从而获取到它 DOM 元素而后调用 DOM API。可是记住一个原则：能不用 ref 就不用。

使用自定义组件的时候，能够在其中嵌套 JSX 结构。嵌套的结构在组件内部均可以经过 props.children 获取到，这种组件编写方式在编写容器类型的组件当中很是有用。而在实际的 React.js 项目当中，咱们几乎天天都须要用这种方式来编写组件。

在 React.js 中你须要把 CSS 属性变成一个对象再传给元素：

<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>

组件的私有方法都用 _ 开头，全部事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头。

组件的内容编写顺序以下：(对本身要求严格遵照)

static 开头的类属性，如 defaultProps、propTypes。
构造函数，constructor。
getter/setter（还不了解的同窗能够暂时忽略）。
组件生命周期。
_ 开头的私有方法。
事件监听方法，handle*。
render开头的方法，有时候 render() 方法里面的内容会分开到不一样函数里面进行，这些函数都以 render 开头。 render() 方法。

<h1>第三阶段</h1> **高阶组件**就是一个函数(而不是组件)，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件做为子组件。

const NewComponent = higherOrderComponent(OldComponent)

高阶组件的做用是用于代码复用，能够把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件经过 props 传递信息。

一个组件能够经过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 做为 context 的声明和验证。

若是一个组件设置了 context，那么它的子组件均可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。任意深度的子组件均可以经过 contextTypes 来声明你想要的 context 里面的哪些状态，而后能够经过 this.context 访问到那些状态。

context 打破了组件和组件之间经过 props 传递数据的规范，极大地加强了组件之间的耦合性。并且，就如全局变量同样，context 里面的数据能被随意接触就能被随意修改，每一个组件都可以改 context 里面的内容会致使程序的运行不可预料。

可是这种机制对于前端应用状态管理来讲是颇有帮助的，由于毕竟不少状态都会在组件之间进行共享，context 会给咱们带来很大的方便。一些第三方的前端应用状态管理的库（例如 Redux）就是充分地利用了这种机制给咱们提供便利的状态管理服务。但咱们通常不须要手动写 context，也不要用它，只须要用好这些第三方的应用状态管理库就好了。

Redux是一种新型的前端“架构模式”。常常和 React.js 一并提出，你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-redux。

Redux 和 React-redux 并非同一个东西。Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你能够把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。

矛盾：react中不一样模块（组件）之间须要共享数据，可能有的模块（组件）还须要修改这些数据。因此就有了“模块（组件）之间须要共享数据”和“数据可能被任意修改致使不可意料的结果”之间的矛盾。因而咱们必须解决这个问题，react.js团队的作法是提升数据修改的门槛：模块（组件）之间的共享数据不能随意修改，只能执行容许的某些修改，并且必须通知我。

function dispatch (action) {
 switch (action.type) {
  case 'UPDATE_TITLE_TEXT':
  appState.title.text = action.text
  break
  case 'UPDATE_TITLE_COLOR':
  appState.title.color = action.color
  break
  default:
  break
     }
  }

全部对数据的操做必须经过dispatch函数。

设计模式之观察者模式：也被称做发布/订阅模式，观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听同一个主题对象。这个主题对象在状态发生变化时，会通知全部的观察者对象，使他们可以自动更新本身。