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
的深入学习。