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
- 新上下文，不用引入第三方包。
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的深入学习。