React Study Note9

事件

react里面的用户事件都是合成事件，被React封装过。内部使用的还是事件的委托机制。
常用的事件有点击事件onClick，input的onChange事件等，官网都可以查到。

箭头函数

import * as React from 'react'

class Child extends React.Component {
  update => e = {
      this.props.onChange('小明名字改了')
  }

  render() {
    return (<div>
      {this.props.parentName}
      <button onClick={this.update}>更新</button>
    </div>)
  }
 }

装饰器

import * as React from 'react'

class Child extends React.Component {
  constructor(props) {
     super(props) 
  }

  @autoBind
  update() {
      this.props.onChange('小明名字改了')
  }

  render() {
    return (<div>
      {this.props.parentName}
      <button onClick={this.update}>更新</button>
    </div>)
  }
}

React Study Note8

事件

react里面的用户事件都是合成事件，被React封装过。内部使用的还是事件的委托机制。
常用的事件有点击事件onClick，input的onChange事件等，官网都可以查到。

合成事件的this指向问题

就像上文一样，我们绑定事件的方式很奇怪，使用了bind来显示绑定this的指向。因为传递到组件内部的只是一个函数，而脱离了当前对象的函数的this指向是不能指到当前组件的，需要显示指定。

通过bind

<button onClick={this.update.bind(this)}>更新</button>

构造器内部指定

import * as React from 'react'

class Child extends React.Component {
  constructor(props) {
     super(props) 
     this.update = this.update.bind(this)
  }

  update() {
      this.props.onChange('小明名字改了')
  }

  render() {
    return (<div>
      {this.props.parentName}
      <button onClick={this.update}>更新</button>
    </div>)
  }
}

React Study Note7

props

props是组件之间传递数据的最主要api, react推崇的是自顶向下的数据流向，也就是组件的数据要从父组件传给子组件。如果子组件需要向父组件传递数据，则需要使用回调函数的方式。
import * as React from ‘react’

class Child extends React.Component {
  render() {
    return (<div>
      {this.props.parentName}
    </div>)
  }
}

class Parent extends React.Component {
  state = {
      name: '小明'
  }    

  render() {
    setTimeout(() => this.setState({name: '小明儿子'})， 5000)

    return (<div>
      <Child parentName={this.state.name}/>
    </div>)
  }
}

可以看到Child组件显示了父组件的name。当父组件状态更新了，子组件同步更新。那如何在子组件中更改父组件状态呢？答案是回调函数。
import * as React from ‘react’

class Child extends React.Component {
  update() {
      this.props.onChange('小明名字改了')
  }

  render() {
    return (<div>
      {this.props.parentName}
      <button onClick={this.update.bind(this)}>更新</button>
    </div>)
  }
}

class Parent extends React.Component {
  state = {
      name: '小明'
  }    

  changeName(name) {
      this.setState({
          name
      })
  }

  render() {
    setTimeout(() => this.setState({name: '小明儿子'})， 5000)

    return (<div>
      <Child onChange={this.changeName.bind(this)} parentName={this.state.name}/>
    </div>)
  }
}

注意props是不可以更改的，这既不符合react单向数据流思想，也为维护带来灾难。

React Study Note6

React数据流

state

state是组件的内部状态，需要在视图里面用到的状态，才需要放到state里面去。如下，我们在类上创建一个state属性，在视图里面通过使用this.state.name去引用。而这里的state定义则代替的是getinitialstate方法。
import * as React from ‘react’

class Page extends React.Component {
  state = {
      name: '小明'
  }    

  render() {
    return (<div>
      {this}
    </div>)
  }
}

如何更新state呢，直接更改state其实可以可以的，不过这样子无法触发组件视图的更新机制。所以使用setState()api。值得注意的是setState是异步的，原因是react内部需要对setState做优化，不是state变了立刻去更新视图，而是拦截一部分state的改变，等到合适的时机再去更新视图。

import * as React from 'react'

class Page extends React.Component {
  state = {
      name: '小明'
  }    

  render() {
    setTimeout(() => this.setState({name: '小明儿子'})， 5000)

    return (<div>
      {this.state.name}
    </div>)
  }
}

React Study Note5

React组件创建

React.createClass

这是旧版本的api，使用React.createClass创建组件，配套的一些api，有getDefaultProps, getinitialstate。官方已经不建议使用了，使用下面新的api替代。

ES6 classes

import * as React from 'react'

class Page extends React.Component {
  render() {
    return (<div>
      home
    </div>)
  }
}

这是一个实现了render方法的class。也是一个基本的react组件。

无状态函数

function Button(props, context) {
    return (
        <button>
            <em>{props.text}</em>
            <span>{context.name}</span>
        </button>
    );

纯函数,不存在state，只接受props和state。纯函数有优点，优点就是易于测试，无副作用。

React Study Note4

插入html

如果动态的插入html元素,react出于安全性考虑会自动帮我们转义。所以一定要动态的插入元素的话，使用dangerouslySetInnerHTML

ReactDOM.render((
  <div className="tab">
    <div dangerouslySetInnerHTML={{__html: 'test'}}></div>
  </div>
), document.getElementById('root')

React Study Note3

属性props

可以向使用html的attr一样使用属性，就像下面img的src一样

`

let name = 'hi'

ReactDOM.render((
  <div>
    <img src="1.png"/>
  </div>
), document.getElementById('root'))`

如果需要传递动态属性，使用{}，多个属性，使用展开运算符

let props = {
    src: '1.png',
    alt: '1图片'
}

ReactDOM.render((
  <div>
    <img src={"1.png"}/>
    <img {...props}/>
  </div>
), document.getElementById('root'))

两个转换,class–>className for–>htmlFor

因为class和for是javascript关键字，所以这里需要用转换之后名称

ReactDOM.render((
  <div className="tab">
    <label htmlFor="name">姓名:</label><input id="name"/>
  </div>
), document.getElementById('root'))

布尔属性

如果一个属性的值是布尔值，当这个值是true的时候则可以省略=后面的值，只保留key。

ReactDOM.render((
  <div className="tab">
    <input type="text" required/>
    <input type="text" required={true}/>
  </div>
), document.getElementById('root'))

原生元素的自定义属性

react对元素属性做了校验，如果在原生属性上使用此元素不支持的属性，则不能编译成功。必须使用data-前缀

ReactDOM.render((
  <div className="tab">
    <input type="text" data-init="22"/>
  </div>
), document.getElementById('root'))

React Study Note2

插入动态数据

let name = 'hi'

ReactDOM.render((
  <div>
    {name}
  </div>
), document.getElementById('root'))

使用{}就可以插入数据，但是{}中间的必须是js表达式，不能是语句。如果表达式的执行结果是一个数组，则会自动join。

注释

jsx语法和html语法一样，也是可以插入注释，只不过写的时候有一些区别

子组件注释

let name = 'hi'

ReactDOM.render((
  <div>
    {/* 注释 */}
    {name}
  </div>
), document.getElementById('root'))

在子组件中插入注释，需要使用{}包裹起来，在/ /之间插入注释文字。

属性注释

let name = 'hi'

ReactDOM.render((
  <div>
    {name}
    <img /* 
        多行注释
    */ src="1.jpg"/>
  </div>
), document.getElementById('root'))

在标签中间，可以插入一个多行注释，类似上面的代码。

React Study Note1

jsx语法

前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx语法。在组件中插入html类似的语法，简化创建view的流程。

原生元素

ReactDOM.render((
  <div>
    <h1>标题</h1>
  </div>
), document.getElementById('root'))

通过简单的语法页面就会被插入一个div+一个h1标签。原生的html元素可以被直接使用。以上的语法并不是js支持的语法，需要被转换之后才能运行。

自定义元素

react强大之处就在于可以组件的自定义，实现组件的复用。如果我们创建了一个组件。我们也可以通过jsx语法调用。
import * as React from ‘react’

class Page extends React.Component {
  render() {
    return (<div>
      home111 &copy;
    </div>)
  }
}

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

我们定义了一个Page组件，可以在jsx里面像调用html一样直接调用。

图

图：由顶点的有穷非空集合和顶点之间边的集合组成，通常表示为：G(V, E)，其中G表示一个图，V是图G中顶点的集合，E是图G中边的集合。

特点

• 顶点集合不能为空
• 边的集合可以为空

各种图定义

• 无向图
  若顶点v1到v2之间的边没有方向，则称这条边为无向边，用无序偶对(v1, v2)来表示。无向图就是图中任意两个顶点之间的边都是无向边。

• 有向图
  若从顶点v1到v2的边有方向，则称这条边为有向边，也称为弧。用有序偶对<v1, v2>来表示，v1称为弧尾，v2称为弧头。有向图就是图中任意两条边都是有向边。

• 简单图
  在图中，不存在顶点到其自身的边，并且同一条边不重复出现，称为简单图。

• 完全图
  如果在无向图中，任意两个顶点之间都存在边，则称为完全图。

• 有向完全图
  如果任意两个顶点之间都存在互为相反的两条弧，则称为又想完全图。