React-第一讲

1.组件(基本)

1.1定义组件

class 名字 extends React.Component{
  render() {
     return 111;
    }
}

1.2使用组件

就跟标签一样

ReactDOM.render(
    111,
    oDiv
);

ReactDOM.render(
    <名字/>,
    oDiv
);

2.组件(有属性)

2.React-事件

React事件

属性--定死

状态--变得

constructor(){} 为构造函数.组件初始化的时候自动调用

• 设置状态2种方法

constructor里面-this.state={ value : ' ' }
如果在其他的方法里面--this.setState({});

• 事件大小写不能乱 例如(onChange onClick)

bin.png

• 绑定事件

onChange = {fn} 不对: fn是方法,不是函数
onChange = {this.fn} 不对:需要bind
onChange = {this.fn.bind(this)} 对

• 用到constructor的时候,必须用super

• constructor(...args) ...args 是ES6可选参数

• React 与 Angular 石川老师认为:他们2个在方向上就有区别,

Angular 特别擅长往网页输出东西 擅长接管UI ----有点霸道 比如JQ的ajax 原生的定时器都不行了 (就像和Angular结婚以后就不能看别的女孩)
React 特别擅长的是组件化 状态管理 ---比较开放的,你用了我以后还可以使用别的 甚至是Vue Angular
都兼容移动端

Angular 与 React

相似之处: 都可以接管组件

不同之处: Angular一切的核心是数据 React一切的核心是状态

---

[组件-生存周期]

### componentWillMount()    创建之前
### conponentDidMount()     创建之后

### componentWillUpdate() 更新之前
### componentDidUpdate()  更新之后

### componentWillUnmount() 卸载之前
### 没有 componentDidUnmoubt

componentWillReceiveProps() 组件参数已经更新

表单原件的问题

1.用value时候不能直接用,改成defaultValue
2.用checked的时候不能直接用,改成defaultChecked

---