React.Component 是一个抽象的Class,通常继承该类来构建自定义的Component。 Component可以将U分离成独立的碎片,有点类似于JavaScript的function,它接受一个任意的输入(props)并返回一个React element描述屏幕中的内容。
有两种方法构建Components
1 JavaScript函数
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,document.getElementById('root')
);
注意: Component必须返回单个根元素,因而要用
将包住。
2 利用React.Component 创建
class Greeting extends React.Component {
constructor(props){
super(props);
this.state = {
color: props.initialColor
};
}
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
必须包含render()方法
Component 生命周期
1 Mounting (挂载)
- constructor() // 构造函数
- componentWillMount()
- render()
- componentDidMount()
2 Updating
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
3 Unmounting
-componentWillUnmount()
每个Component中有
setState()
通过this.setState({value: dddd}) 更新
Class Properties
-defaultProps
class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue'
};
-displayName
string用来在调试中显示信息
-propTypes
class CustomButton extends React.Component {
// ...
}
CustomButton.propTypes = {
color: React.PropTypes.string
};
Instance Properties
props
<Greeting initialColor='blue' />
state 存储一些数据信息,如果不在render()中使用,则最好不要放在state中。
原文链接:https://www.f2er.com/react/305278.html