react快速入门(1)react快速入门，基础知识简单小结，持续更新中，这里先介绍react 由于公司内部技术栈基本为

react

这里先介绍react 由于公司内部技术栈主要为vue，本文主要是向公司内部实习生简单科普react自己编写的简单资料

一些在线资源，用于html引入，快速体验react

  <!--   react-->
         <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <!--    ReactDOM-->
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!--    babel-->
          <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!--    PropTypes-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

jsx语法

有点像js和xml结合混写，简单的理解react支持在js里面直接写html，有自己的语法规范去解析，比如遇到 < 这个标签它就用html规则去解析了，如果遇到 {} 就用js去解析

        var test='解析我吧，我是个变量'
        ReactDOM.render(
        <p>{test}</p>, document.getElementById('app')
        )

值得注意的是在react里面的一些小规范
    1.自定义组件<App> 大写开头
    2.class=>className onclick=>onClick  for=>htmlFor (主要是一个关键字)
    3.组件外面包裹一层，你可以用Fragment也可以用常用的标签，这个就跟vue template,angular的 ag-container一样

渲染ReactDOM.render

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

    ReactDOM.render(
      <p>我是呗插入的模板组件</p>, document.getElementById('reactId')
    )

组件类型

函数式组件

    <div id='reactId'></div>
    
    function ReactCom(){
        return <div>函数式组件</div>
    }
    ReactDOM.render(<ReactCom/>,document.getElementById('reactId'))

类式组件

   <div id='reactId'></div>
   
   class ReactCom extends React.Component{
        render(){
            return (<div>类式组件</div>)
        }  
    }
    ReactDOM.render(<ReactCom/>,document.getElementById('reactId'))

react核心

state

state值对象
setState更改state
方法中的this可用bind(this),或者箭头函数，建议箭头函数

类式组件constructor大部分情况下均可省略

 class ReactCom extends React.Component{      
 //            constructor(props){
 //                super(props)
 //                this.state={
 //                    flag:'我是state',
 //                }
 //            }
     //简写
     state={
         flag:'我的state'
     }     
     render(){
         return <div onClick = {this.handelClick}>{this.state.flag}</div>
     }
     handelClick=(e)=>{
         this.setState({
             flag:'我是state'+1
         })
     }
     }
     ReactDOM.render(
     <ReactCom />,document.getElementById('reactId'))

props

外部给组件传递数据
props只读，不允许改，(外部传入的数据单向数据流)

类似组件使用props

    class ReactCom extends React.Component{ 
        //限制传递数据的rule，通过PropTypes库
        //现在类似以及必传
        static propTypes={
        // name:React.PropTypes.string //已废弃，已从React上移除
        propsName:PropTypes.string.isRequired
        }
        //限制默认值
        static defaultProps={
        propsName:'默认值'
        }
        render(){
            console.log(this)
            return <div>{this.props.propsName}</div>
        }
    }
    let person={
        name:'张三',
        sex:'男'
    }
    ReactDOM.render(<ReactCom  person={person}/>,document.getElementById('reactId'))

函数组件使用props,利用函数传参

     function ReactCom(props){
           console.log(props)
           return <div>{props.propsName}</div>
      }
    //限制传递数据的rule，通过PropTypes库
    //现在类似以及必传
     ReactCom.propTypes={
        // name:React.PropTypes.string //已废弃，已从React上移除
        propsName:PropTypes.string.isRequired
    }
    //限制默认值
     ReactCom.defaultProps={
        propsName:'默认值'
    }
     let person={
            name:'张三',
            sex:'男'
      }
     ReactDOM.render(<ReactCom  person={person} propsName='默认值'/>,document.getElementById('reactId'))

refs

官方说字符串形式的ref已过时，未来会被移除，存在性能问题
回调函数的ref

createRef的ref,建议

 class ReactCom extends React.Component{
         refCreate=React.createRef();//推荐的ref方式
         render(){
             return (
                 <div onClick={this.handelClick}>
                     <span ref='refFlag'>字符串的ref</span>
                     <span ref={e=>{this.refCallback=e;console.log('///',e)}}>回调函数的ref</span>
                     <span ref={this.refCreate}>createRef</span>
                 </div>
             )
         }
         handelClick=()=>{
             console.log('字符串的ref',this.refs)
             console.log('回调函数的ref',this.refCallback)
             console.log('createRef的ref',this.refCreate)
         }
     }
     ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))

react事件绑定

onXXXX什么格式绑定事件，react自身重新封装了

注意绑定事件的this指向

class ReactCom extends React.Component{
      render(){
          return <div onClick={this.handelClick}>事件绑定</div>
      }
      handelClick=(e)=>{
          console.log(e,this)
      }
  }
  ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))

react条件渲染

class ReactCom extends React.Component{
    render(){
        if(false){
            return <div>条件渲染</div>
        }
        return <div>false</div>
    }
}
ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))

react列表渲染

*注意key

     class ReactCom extends React.Component{
            state={
                list:[{
                    id:1,
                    name:1,
                    sex:1
                },{
                    id:2,
                    name:2,
                    sex:2
                }]
            }
            render(){
                let list=this.state.list.map((e)=>
                     <li key={e.id}>{e.name}-{e.sex}</li>  
                )
                return <div>{list}</div>
            }
        }
        ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))

表单

受控组件以state中的状态管理表单官方建议

非受控组件以自身dom节点中的数据管理表单

   // 受控组件例子，推荐
   class ReactCom extends React.Component{
         state={
             username:'2',
             password:'3'
         }
         render(){
             return (
                 <div>
                      username：<input value={this.state.username} name='username' onChange={this.handelChange}></input>
                      password：<input value={this.state.password} name='password' onChange={this.handelChange}></input>
                      <button onClick={this.handelClick}>提交</button>
                 </div>
             )
         }
         handelChange=(e)=>{
             console.log(e.target)
             this.setState({
                 [e.target.name]:e.target.value
             })
         }
         handelClick=()=>{
             alert(this.state.username+'-'+this.state.password)
         }
     }
     ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))

生命周期

组件的生命周期
    初始化阶段
        constructor
        componentWillMount
        render
        componentDidMount  //常用
    更新阶段
        shouldComponentUpdate
        componentWillUpdate
        render
        componentDidUpdate
    卸载阶段
        componentWillUnmount //常用

css

css
    className  class是个关键字，react中很多因为关键字而自己重新封装了api
    
css模块防止污染，或者利用less，sass
    xxx.module.css
    import style form './xxx.module.css'