React组件

组件生命周期:
组件创建阶段  1次
组件运行阶段  触发0次或多次
组件销毁阶段  1次
创建阶段:
static defaultProps = {}
this.state = {}     
UNSAFE_componentWillMount  将要挂挂载到页面
render  渲染虚拟DOM
componentDidMount   完成挂载
运行阶段:
状态state改变,props改变,重新渲染虚拟DOM对象
当render调用完毕,我们的虚拟DOM和组件的state保持一致了。
卸载阶段:
卸载阶段组件尚可使用,当卸载后就消失了。
static defaultProps = {}
this.state = {}  
UNSAFE_componentWillMount:
render:
componentDidMount:
//UNSAFE_componentWillReceivePropes:  父组件通过某些事件重新修改了传递给子组件的props数据之后,才会触发
shouldComponentUpdate:
UNSAFE_componentWillUpdate:
render:
componentDidUpdate:   //到这数据是最新的了
UNSAFE_componentWillUnmount
cnpm i -D @babel/plugin-proposal-class-properties

options: {
        plugins: ['@babel/plugin-proposal-class-properties']
         }
       },   //支持静态方法的插件

cnpm i @babel/runtime -D
static defaultProps = {
  initcount:0
}    //指定传递参数的默认值

cnpm install prop-types -D   //安装类型校验包

import ReactTypes from 'prop-types'
static propTypes = {
   initcount: ReactTypes.number   //希望传入number类型的参数
}
nextProps获取最新参数
·Mounting:
        static defaultProps = {}
        constructor(props){super(props)  this.state={}}
        componentWillMount()
        render()
        componentDidMount()
·Updating:
        //componentWillReceiveProps(nextProps)
        shouldComponentUpdate(nextProps,nextState)
        componentWillUpdate(nextProps,nextState)
        render()
        componentDidUpdate(prevProps,preState)
·Unmounting:
        componentWillUnmount()
 绑定This并传参的几种方式:
1、箭头表达式  箭头函数内部this不取决于调用它的,而是所处大环境下的this
2、在控件内部绑定,onClick={this.increment}
3、在构造函数constructor中绑定bind,并返回给this.函数
this.increment = this.increment.bind(this)
React只支持把数据从state上传输到页面,但是,无法自动实现数据从页面传输到state中进行保存,也就是,React不支持数据的自动逆向传输。
如果为表单元素提供了value属性绑定,必须同时提供为表单元素提供一个readOnly或者提供一个onChange事件。 在onChange中改变数据。
父组件共享数据给子组件:
1、父组件内部定义一个function,这个function有一个固定的名称叫getChildContext
getChildContext(){
    return{
       color:this.state.color
    }
}
2、使用属性校验,规定一下传递给子组件的数据类型,需要定义一个静态的childContextTypes(固定名称,不要改)
static childContextTypes = {
    color:ReactTypes.string
}
3、子组件开始也要进行属性校验
static contextTypes = {
    color:ReactTypes.string
}
调用:
{this.context.color}

getChildContextTypes  前3 后3 后2
路由的基本使用:
cnpm install --save react-router-dom
import {HashRouter,Route,Link} from 'react-router-dom'
return <HashRouter>
<div>
    <h1>这是网站App的根组件</h1>
    <hr/>
    <Link to="/home">首页</Link>   
    <Link to="/movie">电影</Link>   
    <Link to="/about">关于</Link>
    {/* react-router中,通过Route作为路由匹配规则,以及匹配的组件放在这 */}
    <Route path="/home" component={Home}></Route>
    <Route path="/movie" component={Movie}></Route>
    <Route path="/about" component={About}></Route>
</div>
</HashRouter>
默认情况下,路由中的规则是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件。如果想精确匹配,可以为Route启动exact属性。
<Link to="/movie/top250/10">电影</Link>   
<Route path="/movie/:type/:id" component={Movie}exact></Route>
ANTDESIGN组件  蚂蚁金服的UI产品
不要给css样式启用模块化,一般给less或sass启用模块化
https://ant.design/docs/react/introduce-cn

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
在React中,我们可以使用fetch API来获取数据,fetchAPI是基于Promise封装的
componentWillMount(){
    fetch('http://')
    .then(response=>{   //当使用fetchAPI获取数据的时候第一个then中没有数据
       //拿到的是一个Response对象
         return response.json()
    })
    .then(data=>{
         console.log(data);
    })
}
fetch-jsonp可以发送jsonp请求,实现跨域数据获取
cnpm install fetch-jsonp -S

发表评论

电子邮件地址不会被公开。 必填项已用*标注