声明式编程、组件化、组件通讯、组件生命周期、时间系统、组件写法、组件分类。
概念性内容
1、声明式编程
const arry = [1, 2, 3, 4]
const doubled = arry.map(function (val) {
return val*2;
})
console.log(doubled);
2、组件化
class MyButton extends React.Component {
render () {
return () {
<div className="App">
<button>这是一个按钮</button>
</div>
}
}
}
ReactDom.render(<MyButton />, document.getElementById('id'));
2.1、组件之间通讯 - props
class SayHello extends React.Component {
constructor() {
static defaultProps = {
name: '悟空'
}
render () {
return (
<h1>Hello {this.props.name}</h1>
)
}
ReactDom.render(<SayHello name="八戒" />, document.getElementById('root'));
}
}
2.2、组件之间通讯 - state
class ChangeColor extends React.Component {
constructor(props) {
super(props);
this.state = {isRed: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((prevState, props) => ({
isRed: !prevState.isRed
}));
}
render(){
const redStyle = {
color: "red"
}
const blueStyle = {
color: "blue"
}
return(
<div>
<h1 style={this.state.isRed? redStyle: blueStyle}>悟空</h1>
<button onClick={this.handleClick}>点击改变颜色</button>
</div>
)
}
ReactDom.render((<ChangeColor />, document.getElementById('root')))
}
2.3.1、组件之间通讯 - 父=>子
// 子组件
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render(){
return (
<div>this.props.text</div>
)
}
}
// 父组件
class Father extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
refreshChild() {
return (e) => {
this.setState({
childText: "父组件更新子组件成功",
})
}
}
render(){
<div>
<button onClick={this.refreshChild()}>更新子组件</button>
<Child text={this.state.childText || "更新前"}/>
</div>
}
}
ReactDom.render(<Father />, document.getElementById('root'));
2.3.2、组件之间通讯 - 子=>父
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render(){
return (
<div>
<button onClick={this.props.refreshParaent}>更新父组件</button>
</div>
)
}
}
class Father extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
refreshParaent(){
this.setState({
parentText: "子组件更新",
})
}
render(){
return(
<div>
<Child refreshParaent={this.refreshParaent.bind(this)} />
{this.state.parentText || "更新前"}
</div>
)
}
}
ReactDom.render(<Father />, document.getElementById('root'));
2.3.3、组件之间通讯 - 兄弟组件
class Brother1 extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render(){
return(
<div>
<button onClick={this.props.refresh}>更新兄弟组件</button>
</div>
)
}
}
class Brother2 extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render(){
return{
<div>{this.props.text || "未更新的兄弟"}</div>
}
}
}
class Father extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
refresh(){
return (e) => {
this.setState({
text: "兄弟组件通讯成功"
})
}
}
render(){
return{
<div>
<h1>兄弟组件沟通</h1>
<Brother1 refresh={this.refresh()} />
<Brother2 text={this.state.text} />
</div>
}
}
}
ReactDom.render(<Father />, document.getElementById('root'));
2.4、组件的生命周期
2.4.1、挂载期
- constructor（构造函数，初始化状态值）
- getInitialState（设置状态机）
- getDefaultProps（获取默认的props）
- componentWillMount（首次渲染前执行）
- render（渲染组件）
- componentDIdMount（render渲染后执行的操作）
2.4.2、更新期
- componentWillReceiveProps：当父组件更新子组件的state时，该方法会被调用。
- shouldComponentUpdate：该方法决定组件state或者props的改变是否需要重新渲染组件。
- componentWillUpdate：在组件接受新的props或者state时，即将进行重新渲染前调用该方法，和componentWillMount方法类似。
- componentDidUpdate：在组件重新渲染后调用该方法，和componentDidMount方法类似。
2.4.3、卸载期
- componentWillUnmount，当组件从DOM树删除的时候调用该方法。
3、事件绑定
React的事件绑定主要有：组件上绑定、构造器内绑定、箭头函数方式绑定。
class BindClass extends React.Component {
constructor(props) {
super(props);
this.state = {}
this.showName = this.showName.bind(this); // 构造器内绑定
}
showName () {
alert("悟空");
}
render () {
return(
<div>
// 组件上绑定
<button onClick={this.showName}>单击事件1</button>
// 构造器内绑定
<button onClick={this.showName}>单击事件1</button>
// 箭头函数方式绑定
<button onClick={() => this.showName()}>单击事件1</button>
</div>
)
}
}
4、组件分类
4.1 木偶组件（UI组件）& 智能组件（数据管理组件）
// 木偶组件（UI组件）
class CommentList extends React.Component {
constructor(props) {
super(props);
}
render(){
<ul>
{this.props.languages.map(function(language) {
return (
<ul key={language.id}>
<li>{language.name}</li>
</ul>
)
})}
</ul>
}
}
// 智能组件（数据管理组件）
class CommentContainer extends React.Component {
constructor() {
super();
this.state = {
languages: []
}
}
componentDIdMount(){
$.ajax({
url: "data.json",
dataType: 'json',
success: function (languages) {
this.setState({languages: languages})
}.bind(this)
});
}
render(){
return <CommentList languages={this.state.languages} />
}
}
ReactDom.render(<CommentContainer />, document.getElementById('root'));
4.2 高介组件:属性代理，反向代理
//属性代理
function HOC(WrappedComponent) {
return class extends React.Component {
render() {
const newProps ={
name: "Hello React!",
language: 'JS'
}
return (
<div>
<h1>This is a title</h1>
<WrappedComponent {...this.props} {...newProps} />
</div>
)
}
}
}
class HelloWorld extends React.Component {
static defaultProps={
name: "Hello Wlod"
}
componentDIdMount() {
console.log('this.props', this.props);
}
render(){
return <div>{this.props.name}</div>
}
}
const NewComponent = HOC(HelloWorld);
ReactDom.render(<NewComponent />, document.getElementById('root'));
// 反向代理
function HOC(WrappedComponent){
return class extends WrappedComponent {
componentDIdMount() {
this.setState({
isShow: false
})
}
render(){
return(super.render())
}
}
}
class HelloWorld extends React.Component{
constructor() {
super();
this.state = {
isShow: true
}
}
render(){
console.log('this.state', this.state);
return <div>{this.state.isShow?"Hello World":""}<div>
}
}
const NewComponent = HOC(HelloWorld);
ReactDom.render(<NewComponent />, document.getElementById('root'));