react知识体系

概念介绍 （历史）

React是构建用户界面的javaScript的库，主要用于构建ui界面 ，2013年开源（facebook）instagram(照片交互)

特点

• 声明式的设计

• 高效（采用虚拟Dom来实现Dom的渲染，最大限度的减少Dom的操作）

• 灵活（可以跟其他的库灵活搭配使用）

• JSX（在JS里写html），javascript的拓展

• 组件化 ，模块化开发 代码复用很方便

• 单向的数据流，没有实现数据的双向绑定 （数据—视图—事件—数据）

• js BOm 对象 window窗口对象 加载html document location history navigator screen

创建项目

引入链接 使用创建工具app

这种方式仅用于学习使用调试

通过React脚手架创建项目 进行开发 部署

#安装脚手架 Create React App
cnpm intall -g create-react-app
#创建项目
create-react-app 项目名称

JSX元素渲染

//JSX语法
 当做js普通对象
对象.方法（对象，获取到的dom）
ReactDOM.render(  , document.getElementById('root'));
​
改写
let app = ;
let root = document.getElementById('root')
//JSX语法
ReactDOM.render( app,root);
渲染函数
//ReactDOM.render(组件对象,渲染到的地方);
​
​
(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps, HTMLHeadingElement>
  let h1 = 
HelloWorld
; //这就是JSX的语法，认为h1就是一个JSX对象 不需要引号的
  
HelloWorld
这是副标题  //报错 因为有两个节点 必须只有一个根节点
  
HelloWorld这是副标题
 //这样是可以的 只有一个根h1

react的样式和注释 （style）

let exampleStyle= {
  background:"skyblue",
  borderBottom:"1px solid red"
}
//样式全部都会放在{}这里
let Element = (
  

    
HelloWorld
  //在jsx中style="height:200px"不允许这样写
  
)
ReactDOM.render(Element,document.querySelector('#root'))
​
​
JSX注释  {/* 这里写注释 */}
let Element1 = (
  

    {/* 这里写注释 */}
    
HelloWorld
  
)
​
#注释{/* 这里写注释 */}    

react组件

函数式组件（静态组件）

// 函数式组件| 首字母大写
function Child() {
  let title = 
我是副标题
  let weather = '下雨'
  let isGo = weather==='下雨'? '不出门':'出门'
  //返回一个jsx对象
  return (
    

      
Hello World
      {title}
      

      是否出门？
  {isGo}
      
    
  )
}
//使用函数式组件
ReactDOM.render(
  , //使用时,或者
  document.querySelector('#root')
)

类组件（动态组件）

// 定义类组件
class HelloWorld extends React.Component{
  //类组件用render就可以啦 
  render(){
     return (
       

         
Hello
       
     )
  }
}
// 使用类组件
ReactDOM.render(
  ,
  document.querySelector('#root')
)
​
// 组件中可以放置无数个子组件

class HelloWorld extends React.Component{
    render(){
     return (
       

         
Hello
        
       
     )
  }
}

react父子组件通信

父传子

//在父元素中使用state去控制子元素props从而达到父元素数据传递给子元素
class ParentCom extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      isActive:true
    }
    this.change = this.change.bind(this)
  }
  change(){
      //点击事件改变状态
      this.setState({
          isActive: !this.state.isActive
      })
  }
  render(){
    return (
      

          控制子元素显示
           //父组件传递给子组件
      
    )
  }
}

class ChildCom extends React.Component{
  constructor(props){
    super(props)
  }
  //子组件接受参数进行判断是否显示
  render(){
    let strClass = null
    if(this.props.isActive){
      return (
        strClass =' active'
      )
    }else{
      strClass = ""
    }
    return (
      

        
我是子元素
      
    )
  }
}
ReactDOM.render(
  ,
  document.querySelector('#root')
)

子传父

//子组件传父组件
class ParentCom extends React.Component{
  constructor(props){
    super(props)
    this.state = {
        childData:""
    }
  }
  render(){
    return (
      

        
子元素传递给父元素的数据{this.state.childData}
        {/* 数据传递过来给给this.setChildData，让子组件可以修改父组件数据 */}
         
      
    )
  }
  //设置子组件传过来的数据 可以修改父组件数据
  setChildData=(data)=>{
      this.setState({
        childData:data
      })
  }
}

class  Child extends React.Component{
  constructor(props){
    super(props)
    this.state ={
       msg : "Hello"
    }
  }
  render(){
    return (
      

        传递Hello给父组件
      
    )
  }
  sendData=()=>{
    alert(this.state.msg)
  }
 // 可以定义箭头函数（访问地址就是当前this） 不用绑定
}

ReactDOM.render(
  ,
  document.querySelector('#root')
)



class  Child extends React.Component{
  constructor(props){
    super(props)
    this.state ={
       msg : "Hello"
    }
  }
  render(){
    return (
      

        传递Hello给父组件
        {this.props.setChildData('直接调用props')}}>
      
    )
  }
  sendData=()=>{
    alert(this.state.msg)
  }
  // 可以定义箭头函数（访问地址就是当前this） 不用绑定
}

react生命周期

组件在创建 使用 乃至销毁的整个声明过程周期

在声明周期中我们有许多调用时间 俗称钩子函数（事件 方法）

声明周期的三个状态 ：

Mounting：将组件插入到DOM中

Updateing： 将数据更新到DOM中

Unmounting:将组件移除DOM中

钩子函数：所有7个

CompontWillMount：组件将要渲染

CompontDidMount：组件渲染完毕

CompontWillReceiveProps:组件将要接受props数据

ShouldComponentUpdate:在组件接受新的state或者props，判断是否更新，返回boolean值

CompontWillUpDate:组件将要更新

CompontDidUpdate:组件更新完毕

CompoentWillUnmount:组件将要卸载

将要渲染—渲染完毕–将要接受参数—接受参数是否更新—将要更新—-更新完毕—将要卸载

class ComLife extends Component{
  constructor(props){
    super(props)
    this.state = {
      msg:'HelloWorld'
    }
    console.log("constructor构造函数")
  }
  componentWillMount(){
    console.log("组件将要渲染")
    }
  componentDidMount(){
    console.log("componentDidMount组件渲染完毕")
  }
  componentWillReceiveProps(){
    console.log("componentWillReceiveProps组件将要接受新的数据")
  }
  componentWillUpdate(){
    console.log("componentWillUpdate组件将要更新")
  }
  componentDidUpdate(){
    console.log("componentDidUpdate组件更新完毕")
  }
  componentWillUnmount(){
    console.log("componentWillUnmount组件将要卸载")
  }
  render(){
    console.log("render渲染函数")
      return(
        

          
{this.state.msg}
          组件更新
        
      )
  }
  onChangeMsg=()=>{
    this.setState({
        msg:"Hello 老陈"
    })
  }
}
ReactDOM.render(
  ,
  document.querySelector('#root')
)

react-Ant-UI

Ant 蚂蚁框架

ant-design