react创建无状态函数式组件
1.函数定义 无状态函数式组件
2.该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
3.当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”
<div id="example"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
function HelloReact(props) {
return <div>{
props.name}</div>
}
ReactDOM.render(
<HelloReact name={
'hello React!!!'} />,
document.getElementById('example')
);
</script>
无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：
- 组件不会被实例化，整体渲染性能得到提升，因为组件被精简成一个render方法的函数
- 组件不能访问this
- 组件无法访问生命周期的方法
- 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用
无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。
React.createClass
React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件,不过在react16.x已经被抛弃了
var InputControlES5 = React.createClass({
propTypes: {
//定义传入props中的属性各种类型
initialValue: React.PropTypes.string
},
defaultProps: {
//组件默认的props对象
initialValue: ''
},
// 设置 initial state
getInitialState: function() {
//组件相关的状态对象
return {
text: this.props.initialValue || 'placeholder'
};
},
handleChange: function(event) {
this.setState({
//this represents react component instance
text: event.target.value
});
},
render: function() {
return (
<div>
Type something:
<input onChange={
this.handleChange} value={
this.state.text} />
</div>
);
}
});
无状态组件相比，React.createClass和后面要描述的React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。
React.Component
类组件：
1.做复杂的数据处理、需要有自己的状态的时候，需要用类组件。
2.他有自己的生命周期也有react给他提供的一些内置函数方法。有自己的this和状态。
要点：
• 类的名字就是组件的名字
• 类的开头一定要大写
• 类要继承自React.Component
• 组件内部一定要有render函数，否则报错
class StudyReactCpn extends React.Component {
constructor(props) {
super(props)
//this.props.initialValue 初始值
this.state = {
flag: this.props.initialValue
}
}
ChangeWeather = () => {
console.log(this)
}
render() {
const {
flag } = this.state
return <div onClick={
this.ChangeWeather}>{
flag ? 'true' : 'false'}</div>
}
}
ReactDOM.render(
<StudyReactCpn initialValue={
false} />,
document.getElementById('example')
);
react事件监听的三种写法
第一种
使用bind关键字改变this指向
class StudyReactCpn extends React.Component {
constructor(props) {
super(props)
this.ChangeFlag= this.ChangeFlag.bind(this)
}
state = {
flag: this.props.initialValue
}
ChangeFlag() {
console.log(this)
}
render() {
const {
flag } = this.state
return <div onClick={
this.ChangeFlag}>{
flag ? 'true' : 'false'}</div>
}
}
ReactDOM.render(
<StudyReactCpn initialValue={
false} />,
document.getElementById('example')
);
第二种
箭头函数解决this指向
class StudyReactCpn extends React.Component {
constructor(props) {
super(props)
}
state = {
flag: this.props.initialValue
}
//箭头函数解决this指向
ChangeFlag= ()=> {
this.setState({
flag:!this.state.flag
})
}
render() {
const {
flag } = this.state
return <div onClick={
this.ChangeFlag}>{
flag ? 'true' : 'false'}</div>
}
}
ReactDOM.render(
<StudyReactCpn initialValue={
false} />,
document.getElementById('example')
);
第三种
直接箭头函数改变this指向
class StudyReactCpn extends React.Component {
constructor(props) {
super(props)
}
state = {
flag: this.props.initialValue
}
ChangeFlag() {
this.setState({
flag: !this.state.flag
})
}
render() {
const {
flag } = this.state
//3.直接箭头函数改变this指向
return <div onClick={
() => this.ChangeFlag()}>{
flag ? 'true' : 'false'}</div>
}
}
ReactDOM.render(
<StudyReactCpn initialValue={
false} />,
document.getElementById('example')
);