渲染React组件
通过ReactDOM直接渲染
ReactDOM.render(
<span>Hello World!</span>,
document.getElementById('example')
);
通过React.Component创建组件再通过ReactDOM渲染(推荐方法)
class MyTitle extends React.Component {
render() {
return <h1>Hello World</h1>;
}
};/*该段表示MyTitle类继承基类React.Component下所有属性及方法*/
ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
通过React.createClass创建组件再通过ReactDOM渲染
const MyTitle = React.createClass({
render () {
return return <h1>Hello World</h1>;
}
})/*从 React 0.13 开始，官方推荐使用 ES6 类语法来进行组件的定义*/
关于React组件中的数据传递
通过this.props传参获取数据,React还提供一个refs方式用来获取真实的DOM结点
/*this.props*/
class MyTitle extends React.Component {
render() {
return <h1 style={{color: this.props.color}}>Hello World</h1>;
}
};
ReactDOM.render(
<MyTitle color="red" />,
document.getElementById('example')
);
/*this.refs*/
var MyTitle = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyTitle />,
document.getElementById('example')
);
每个组件都有她自身的内部状态,这边是this.state,React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现
class MyTitle extends React.Component {
constructor(...args) {/*组件构造函数*/
super(...args);
this.state = {
name: '访问者'/*定义初始状态*/
};
}/*定义一个组件*/
handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}
render() {
return <div>{/*.bind(this)表示该方法内部的this绑定当前组件*/}
<input type="text" onChange={this.handleChange.bind(this)} />
{/*当onChange时调用handleChange事件重新渲染组件*/}
<p>你好，{this.state.name}</p>
</div>;
}
};
ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
React本身为组件不同的生命阶段提供了不同的钩子方法(钩子方法简单来说就是一些运行在特定的某一状态前后的方法),可以利用这些方法
componentWillMount() /*组件加载前*/
componentDidMount() /*组件加载后(一般在此时发出Ajax请求)*/
componentWillUpdate() /*组件更新前*/
componentDidUpdate() /*组件更新后*/
componentWillUnmount() /*组件卸载前*/
componentWillReceiveProps() /*组件接受新的参数时*/
最后是Ajax请求,React组件中的Ajax请求一般在组件生命周期中的componentDidMount发出
class MyList extends React.Component {
constructor(...args) {
super(...args);
this.state = {
loading: true, /*设置初始state*/
error: null,
data: null
};
}
componentDidMount() {
const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';/*调用api*/
$.getJSON(url)
.done(
(value) => this.setState({
loading: false,
data: value/*把获取的数据value装载到data中*/
})
).fail(
(jqXHR, textStatus) => this.setState({
loading: false,
error: jqXHR.status/*一旦失败的话就装载error*/
})
);
}
render() {
if (this.state.loading) {
return <span>Loading...</span>;
} else if (this.state.error !== null) {
return <span>Error: {this.state.error}</span>;
} else {
console.log(this.state.data);/*先输出到控制台查看数据结构*/
/*处理数据*/
var projects = this.state.data.items;
var results = [];
projects.forEach(p => {
var item = <li>{p.name}</li>;
results.push(item);
});
return (
<div>
<p>API 数据获取成功</p>
<ul>{results}</ul>
</div>
);
}
}
};
ReactDOM.render(
<MyList/>,
document.getElementById('example')
);
关于React组件的嵌套
React组件的思想很简单,就是用一个组件装载其他组件,这便是组件的嵌套
/*装载组件*/
var Avatar =React.createClass({
render: function() {
return (
<div>
<ProfilePicusername={this.props.username} />
<ProfileLinkusername={this.props.username} />
</div>
);
}
});
/*子组件*/
var ProfilePic =React.createClass({
render: function() {
return (
<img src={'http://graph.facebook.com/'+ this.props.username + '/picture'} />
);
}
});
var ProfileLink =React.createClass({
render: function() {
return (
<a href={'http://www.facebook.com/' +this.props.username}>
{this.props.username}
</a>
);
}
});
/*渲染装载组件*/
React.render(
<Avatar username="pwh" />,
document.getElementById('example')
);
高阶组件
高阶组件就是返回组件的组件,她可以在不修改原组件的前提下,修改或增强原组件的行为
function noId() {
return function(Comp) { /*返回一个接收组件的函数*/
return class NoID extends Component { /*该函数返回一个组件*/
render() {
const {id, ...others} = this.props
return (
<Comp {..others} />
)
}
}
}
}
const WithoutID = noId()(Comp)
propTypes
用于检查组件的数据类型是否准确
MyElysion.propTypes ={
El: PropTypes.string.isRequired,
Elys: PropTypes.array.isRequired,
Elysion: PropTypes.func.isRequired
}
未完待续
