（React启蒙）理解React 组件
理解React组件在具体说明如何创建React组件的语法之前，对什么是React组件，其存在的意思及其划分依据等做一个论述是很有必要的。 我们设想现在有一个webApp，这个app可以用来实现很多功能，依据功能，我们可以把其划分为多个功能碎片。要实现这么一个功能碎片，可能需要更多更小的逻辑单元，甚至还可以继续分。而我们编程其实就是在有一个总体轮廓的前提下，通过解决一个个小小的问题来解决一个小问题，解决一个个小问题来实现软件的开发。React组件就是这样，你可以就把它当做一个个可组合的功能单元。 以一个登陆框为例，登录框本身就是网站的一个组件，但是其内包含诸如文本输入框，登陆按钮等，当然如果你想要做的只是最基础的功能，输入框和按钮等可以只是一个个React 节点，但是如果你想为输入框加上输入检测，输入框可能就有必要写成一个单独的组件了，这样也有利于复用，之后需要做的可能只是简单的通过 创建React组件React组件通过调用
在上述所以方法中，最重要且必不可少的是 实际写一个例子总比空说要容易理解，以下是使用React的 var Timer = React.createClass({
getInitialState: function() {
return {
secondsElapsed: Number(this.props.startTime) || 0
};
},tick: function() { //自定义方法
this.setState({
secondsElapsed: this.state.secondsElapsed + 1
});
},componentDidMount: function() {//生命周期函数
this.interval = setInterval(this.tick,1000);
},componentWillUnmount: function() {//生命周期函数
clearInterval(this.interval);
},render: function() { //使用JSX返回节点
return (
<div>
Seconds Elapsed: {this.state.secondsElapsed}
</div>
);
}
});
ReactDOM.render(< Timer startTime = "60" / >,app); //pass startTime prop,used for state
点击JSFiddle查看效果； 现在如果对上述组件创建的代码有所疑惑也不要紧，本文接下来将一步步的介绍上述代码中设计都的各个概念，包括 在此需要注意的是组件名是以大写开头的。 当一个组件被创建（挂载）以后，我们就可以使用组件的API了，一个组件包含以下四个API this.setState({mykey: 'my new value'});
this.setState(function(previousState,currentProps)
{ return {myInteger: previousState.myInteger + 1};
});
作用： 用以重新渲染组件或者子组件 this.replceState({mykey: 'my new value'});
作用： 效果和`setState()`类似，不过并不会和老的状态合并，而是直接删除老的状态，应用新的状态。
this.forceUpdate(function(){//callback});
作用： 调用此方法将跳过组件的`shouldComponentUpdate()`事件，直接调用`render()` this.isMounted() 作用 判断组件是否被挂载在DOM中，组件被挂载返回`true`,否则返回`false` 最常用的组件API是 小结
React组件的返回值上文已经提到每个React组件必须有的方法就是 var MyComponent = React.createClass({
render: function() {
return <reactNode> <span>test</span> <span>test</span> </reactNode>;
}
});
ReactDOM.render(<MyComponent />,app);
值得注意的地方在于，如果你想返回的react 节点超过一行，应该用括号把返回值包围起来，如下所示 var MyComponent = React.createClass({
render: function() {
return (
<reactNode>
<span>test</span>
<span>test</span>
</reactNode>
);
}
});
ReactDOM.render(<MyComponent />,app);
另一个值得注意的地方是返回值最外层不能出现多个节点（组件），否者会报错 var MyComponent = React.createClass({
render: function() {
return (
<span>test</span>
<span>test</span>
);
}
});
ReactDOM.render(<MyComponent />,app);
上述代码就会报错，报错信息如下 babel.js:62789 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (10:3)
8 | return (
9 | <span>test</span>
> 10 | <span>test</span>
| ^
11 | );
12 | }
13 | });
一般来说开发者会在最外层加上一个 同样，如果 获取组件实例的两种方法当一个组件被 第一种方法就是使用 var Foo = React.createClass({
componentWillMount:function(){ console.log(this) },componentDidMount:function(){ console.log(this) },render: function() {
return <div>{console.log(this)}</div>;
}
});
ReactDOM.render(<Foo />,document.getElementById('app'));
获取某组件实例的另外一种方法是调用 var Bar = React.createClass({
render: function() {
return <div></div>;
}
});
var foo; //store a reference to the instance outside of function
var Foo = React.createClass({
render: function() {
return <Bar>{foo = this}</Bar>;
}
});
var FooInstance = ReactDOM.render(<Foo />,document.getElementById('app'));
console.log(FooInstance === foo); //true，说明返回值和指向一致
小结 在组件上定义事件第四章和第五章已经多次介绍过React的事件系统，事件可以被直接添加都React节点上，下面的代码示例中，我们添加了两个React事件（ var MyComponent = React.createClass({
mouSEOverHandler:function mouSEOverHandler(e) {
console.log('you moused over');
console.log(e); //e is sysnthetic event instance
},clickHandler:function clickhandler(e) {
console.log('you clicked');
console.log(e); //e is sysnthetic event instance
},render:function(){
return (
<div onClick={this.clickHandler} onMouSEOver={this.mouSEOverHandler}>click or mouse over</div>
)
}
});
ReactDOM.render(<MyComponent />,document.getElementById('app'));
点击JSFiddle查看效果； 事件可以被看做是特殊的 var MyComponent = React.createClass({
mouSEOverHandler:function mouSEOverHandler(e) {
console.log(this); //this is component instance
console.log(e); //e is sysnthetic event instance
},render:function(){
return (
<div onMouSEOver={this.mouSEOverHandler}>mouse over me</div>
)
}
});
ReactDOM.render(<MyComponent />,document.getElementById('app'));
React所支持的所以事件可见此表 小结
组件组合React组件的 下例中组件BadgeList包含了BadgeBill和BadgeTom两个组件。 var BadgeBill = React.createClass({
render: function() {return <div>Bill</div>;}
});
var BadgeTom = React.createClass({
render: function() {return <div>Tom</div>;}
});
var BadgeList = React.createClass({
render: function() {
return (<div>
<BadgeBill/>
<BadgeTom />
</div>);
}
});
ReactDOM.render(<BadgeList />,document.getElementById('app'));
此处为展示嵌套关系，代码有所简化。 小结
React组件的生命周期函数每个组件都具有一系列的发生在其生命中不同阶段的事件，这些事件被称为生命周期函数。 生命周期函数可以理解为React为组件的不同阶段提供了的钩子函数，用以更好的操作组件，下例是一个定时器组件，其在不同生命周期函数中执行了不同的事件 var Timer = React.createClass({
getInitialState: function() {
console.log('getInitialState lifecycle method ran!');
return {secondsElapsed: Number(this.props.startTime) || 0};
},tick: function() {
console.log(ReactDOM.findDOMNode(this));
if(this.state.secondsElapsed === 65){
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
return;
}
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},componentDidMount: function() {
console.log('componentDidMount lifecycle method ran!');
this.interval = setInterval(this.tick,componentWillUnmount: function() {
console.log('componentWillUnmount lifecycle method ran!');
clearInterval(this.interval);
},render: function() {
return (<div>Seconds Elapsed: {this.state.secondsElapsed}</div>);
}
});
ReactDOM.render(< Timer startTime = "60" / >,app);
组件的生命周期可被分为挂载（Mounting），更新（Updating）和卸载（UnMounting）三个阶段。 下面将对不同阶段各函数的功能及用途进行描述，弄清这一点很重要
对挂载阶段的生命周期函数的描述 | 方法 | 描述 | 更新阶段
对更新阶段的生命周期函数的描述
卸载阶段
对此阶段的生命周期函数的描述
小结
获取子组件和子节点的方法如果一个组件包含子组件或React节点(如 下面的例子展示了如何使用 var Parent2 = React.createClass({
componentDidMount: function() {
//将会获得<span>child2text</span>,console.log(this.props.children);
//将会获得 child2text,或得了子元素<span>的子元素
console.log(this.props.children.props.children);
},render: function() {return <div />;}
});
var Parent = React.createClass({
componentDidMount: function() {
//获得了一个数组 <div>test</div> <div>test</div>
console.log(this.props.children);
//获得了这个数组中的对应子元素中的子元素 childtext,console.log(this.props.children[1].props.children);
},render: function() {return <Parent2><span>child2text</span></Parent2>;}
});
ReactDOM.render(
<Parent><div>child</div><div>childtext</div></Parent>,document.getElementById('app')
);
观察上述的代码可以看出以下几点
为了更好的操作
小结
两种
|