React学习之class组件

class组件

import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component{
    
    
	constructor(props,context){
    
    
		super(props,context)
	}//可以不写
	render(){
    
    
		return <div>
		</div>
	}
}
ReactDom.render(<App/>,document.getElementById("root"))

1.state和props
state是该组件私有的状态，props是父组件传给该组件的数据。this.props中的数据是只读的，不能修改。
react是单项数据流，数据改变并不能触发视图更新，只能手动触发。唯一方法是通过setState()。
setState():大多数情况下为异步更新，只有原生事件绑定和定时器事件为同步更新。

2. 生命周期函数
getDerivedStateFromProps :将props属性合并到state中去，必须返回一个对象。
componentDidMount ：DOM渲染完成之后执行，操作dom,发送ajax请求
shouldComponentUpdate(newProps,newState):控制组件是否更新，提升组件的渲染效率。当return false 时，不更新。
componentWillUpdate ：dom更新完成之后触发
componentWillUnmount :组件销毁前，主要用来清除事件或定时器。

3. 上下文context：为了更方便的让子组件、孙子组件、孙孙子组件…来获取父组件的数据props.

老上下文：创造一个上下文，首先声明上下文中的数据类型,需要引入包import propTypes from 'prop-types'

父组件
import React from 'react'
import ReactDom from 'react-dom'
import propTypes from 'prop-types'
import Son from './son'
class Parent extends React.Component{
    
    
	static childContextTypes={
    
    
    	name:propTypes.string,
    	age:propTypes.number
	}
	getChildContext(){
    
    
    	return{
    
    
       		 name:'珠峰',
       		 age:10
    	}
	}
	render(){
    
    
		return <div>
			<Son/>
		</div>
	}
}
ReactDom.render(<Parent/>,document.getElementById("root"))

子组件：
import ReactDom from 'react-dom'
import propTypes from 'prop-types'
class Son extends React.Component{
    
    
	static contextTypes={
    
    
    	name:proTypes.string
	}//需要什么属性就接受什么属性
	render(){
    
    
		return <div>{
    
    this.context.name}
		</div>
	}
}
export default Son

2. 新上下文，不用引入第三方包。

import React from 'react
let Context=React.createContext();
export default Context

//父组件
import React from 'react'
import ReactDom from 'react-dom'
import Child from './son'
import Context from './context'

class App extends React.Component{
    
    
   
    render(){
    
    
        console.log(Context)
        return <div>
            <Child/>
            {
    
    /* <Grandson/> */}
        </div>
    }
}
ReactDom.render(<Context.Provider value={
    
    {
    
    theme:"reed",title:'世界你好'}}>
<App/>
</Context.Provider>
,document.getElementById("root"))

//子组件
import React from 'react'
import Context from './context'
class Child extends React.Component {
    
    
    static contextType=Context
    render() {
    
    
        console.log(this);
        return <div>
            <p>{
    
    this.context.theme}</p>
            <p>{
    
    this.context.title}</p>
        </div>
    }
}
export default Child

另外还有一种方式见博客React Context的使用

后面应该会写redux的使用及其源码复现，以及react-redux的深入学习。