react1

Posted 2020-08-22 2350305682

1、方法用()  里面的每个参数之间用,分隔
2、对象(函数、数组)用{}
3、{/*注释...*/}

4 组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

5、.bind(this) 让函数里的this指向函数外面的对象
在这里指的是当前的组件对象

6 多个标签要用<div>包起来

7 绑定事件：onClick（驼峰式命名） (原生html中用全小写)

8 ref="box" ， 给子组件起名字，通过

9 React.findDOMNode(this.refs.属性名) 这个方法用了获取真实的dom节点

10组件：封装起来具有独立功能的ui控件，高度可重用（许多方法的集合）

11React. createClass({这是一个许多方法组成的对象});

12 组件
（1）React自有方法(组件生命周期里的方法) render componentWillUpdate componentDidMount
（2）自定义方法 handleClick handleChange handleMouseover

这是一个带有事件处理函数的组件，它一共有4个方法
var Content=React.createClass({
getInitialState:function(){
这是react自有方法
},
handleChange:function(event){
这是一个事件处理函数
},
handleSubmit:function(){
这是一个事件处理函数
},
render:function(){
这是react自有方法
},
});

onClick是一个组件或者子组件的属性，用=来赋值，this指向的是组件这个对象，handleClick指的是函数（即对象的方法），如果handleClick()指的就是函数返回的方法。
onClick={this.handleClick}

13 实例
var HelloWorld=React.creactClass({
handleChange:function(event){
console.log(event.target.value);
},
render:function(){ //当input值改变时，就执行handleChange函数
return <div>
<input onChange={this.handleChange}></input>
</div>;
},
});
React.render( 把组件渲染到body中
<HelloWorld></HelloWorld>,
document.body
);