react知识体系

概念介绍 （历史）

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

特点

• 声明式的设计

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

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

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

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

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

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

创建项目

引入链接 使用创建工具app

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

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

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

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

JSX元素渲染

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

react的样式和注释 （style）

let exampleStyle= {
  background:"skyblue",
  borderBottom:"1px solid red"
}
//样式全部都会放在{}这里
let Element = (
  <div>
    <h1 style={exampleStyle}>HelloWorld</h1>  //在jsx中style="height:200px"不允许这样写
  </div>
)
ReactDOM.render(Element,document.querySelector('#root'))
​
​
JSX注释  {/* 这里写注释 */}
let Element1 = (
  <div>
    {/* 这里写注释 */}
    <h1  className={classStr}>HelloWorld</h1>
  </div>
)
​
#注释{/* 这里写注释 */}    

react组件

函数式组件（静态组件）

// 函数式组件| 首字母大写
function Child() {
  let title = <h2>我是副标题</h2>
  let weather = '下雨'
  let isGo = weather==='下雨'? '不出门':'出门'
  //返回一个jsx对象
  return (
    <div>
      <h1>Hello World</h1>
      {title}
      <div>
      是否出门？
  <span>{isGo}</span>
      </div>
    </div>
  )
}
//使用函数式组件
ReactDOM.render(
  <Child />, //使用时<Child />,或者<Child></Child>
  document.querySelector('#root')
)

类组件（动态组件）

// 定义类组件
class HelloWorld extends React.Component{
  //类组件用render就可以啦 
  render(){
     return (
       <div>
         <h1>Hello</h1>
       </div>
     )
  }
}
// 使用类组件
ReactDOM.render(
  <HelloWorld/>,
  document.querySelector('#root')
)
​
// 组件中可以放置无数个子组件

class HelloWorld extends React.Component{
    render(){
     return (
       <div>
         <h1>Hello</h1>
        <Child />
       </div>
     )
  }
}

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 (
      <div>
          <button onClick={this.change}>控制子元素显示</button>
          <ChildCom isActive={this.state.isActive}/> //父组件传递给子组件
      </div>
    )
  }
}

class ChildCom extends React.Component{
  constructor(props){
    super(props)
  }
  //子组件接受参数进行判断是否显示
  render(){
    let strClass = null
    if(this.props.isActive){
      return (
        strClass =' active'
      )
    }else{
      strClass = ""
    }
    return (
      <div className= {"content" +strClass}>
        <h1>我是子元素</h1>
      </div>
    )
  }
}
ReactDOM.render(
  <ParentCom />,
  document.querySelector('#root')
)

子传父

//子组件传父组件
class ParentCom extends React.Component{
  constructor(props){
    super(props)
    this.state = {
        childData:""
    }
  }
  render(){
    return (
      <div>
        <h1>子元素传递给父元素的数据{this.state.childData}</h1>
        {/* 数据传递过来给给this.setChildData，让子组件可以修改父组件数据 */}
        <Child setChildData={this.setChildData}/> 
      </div>
    )
  }
  //设置子组件传过来的数据 可以修改父组件数据
  setChildData=(data)=>{
      this.setState({
        childData:data
      })
  }
}

class  Child extends React.Component{
  constructor(props){
    super(props)
    this.state ={
       msg : "Hello"
    }
  }
  render(){
    return (
      <div>
        <button onClick={this.sendData}>传递Hello给父组件</button>
      </div>
    )
  }
  sendData=()=>{
    alert(this.state.msg)
  }
 // 可以定义箭头函数（访问地址就是当前this） 不用绑定
}

ReactDOM.render(
  <ParentCom/>,
  document.querySelector('#root')
)



class  Child extends React.Component{
  constructor(props){
    super(props)
    this.state ={
       msg : "Hello"
    }
  }
  render(){
    return (
      <div>
        <button onClick={this.sendData}>传递Hello给父组件</button>
        <button onClick={()=>{this.props.setChildData('直接调用props')}}></button>
      </div>
    )
  }
  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(
        <div>
          <h1>{this.state.msg}</h1>
          <button onClick={this.onChangeMsg}>组件更新</button>
        </div>
      )
  }
  onChangeMsg=()=>{
    this.setState({
        msg:"Hello 老陈"
    })
  }
}
ReactDOM.render(
  <ComLife/>,
  document.querySelector('#root')
)

react-Ant-UI

Ant 蚂蚁框架

ant-design