react入门小笔记

    /* react组件规范 
        **组件的私有方法都用 _ 开头,所有事件监听的方法都用 handle 开头.把事件监听方法传给组件的时候,属性名用 on 开头,
        这样统一规范处理事件命名会给我们带来语义化组件的好处,在多人协作的时候也会非常方便.
    
    */
  
    1.//类组件
    class DomeFormat extends Component {   //***********组件结构应当如此例一样从上往下的 */
        
        // 1.static 开头的类属性,如 defaultProps、propTypes
        static propTypes = {
            datas: PropTypes.object.isRequired //npm install --save prop-types
        }

        static defaultProps ={
            showContent:'内容' 
        }

        static child = {
            
        }

        // 2.构造函数,constructor
        constructor () {
            super()
            this.state = {a: '',b:'',hContent: '<h1>hello world</h1>',color:'red'}
        }

        // 3.getter/setter
        // 4.组件生命周期
        componentWillMount () {
            console.log('组件挂载开始之前,也就是在组件调用 render 方法之前调用')
            // 一般用的比较少,服务端使用
        }
        componentDidMount (){
            console.log('组件挂载完成以后,也就是 DOM 元素已经插入页面后调用')
            // 加载外部数据,Ajax数据请求等.
        }
        shouldComponentUpdate (nextProps,nextState){
            console.log('唯一用于控制组件重新渲染的生命周期')
            //当传入props或者state时,通过nextProps,nextState进行比对返回true和false,通常用来检查是否更新了props或者state.利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能.
        }
        componentWillReceiveProps (nextProps){
            //在接受父组件改变后的props需要重新渲染组件时用到的比较多,子类使用.
        }
        componentWillUpdate (nextProps,nextState){
            //组件开始重新渲染之前调用.
        }
        componentDidUpdate (nextProps,nextState){
            //组件重新渲染并且把更改变更到真实的 DOM 以后调用.
        }
        componentWillUnmount (){
            console.log('组件对应的 DOM 元素从页面中删除时调用')
            //关闭计时器,组件销毁未正确结束的ajax请求等时使用.
        }



        // 5._ 开头的私有方法
        _saveUsername (username) {
            localStorage.setItem('username', username)
        }

        // 6.事件监听方法,handle*
        handleClick(e){
            // 6.1（调用 setState 的时候,React.js 并不会马上修改 state.而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到 state 当中,然后再触发组件更新）
            this.setState({
                a: 0
            })

            // 6.2 setState 的第二种使用方式（可直接获取setState后的值）
            this.setState((prevState) => {
                return { a: 0 }
            })
            this.setState((prevState) => {
                return { a: prevState.a + 1 }
            })
            this.setState((prevState) => {
                return { count: prevState.count + 2 }
            })
            /*结果a为3 实际上组件只会重新渲染一次,而不是三次,因为setState 进行了合并*/
        }


        // 7.render*开头的方法,有时候 render() 方法里面的内容会分开到不同函数里面进行,这些函数都以 render* 开头
        // 8.render() 方法.
        render () {
            const cName = 'header'
            const isGood = true
            const users = [
                { username: 'Jerry', age: 21, gender: 'male' },
                { username: 'Tomy', age: 22, gender: 'male' },
                { username: 'Lily', age: 19, gender: 'female' },
                { username: 'Lucy', age: 20, gender: 'female' }
            ]
            return (
              <div className='demoDiv'>
                <div className="1.大括号">  {/* {}内可以放任何 JavaScript 的代码,包括变量、表达式计算、函数执行等等  甚至是这行注释..*/}
                    <div>{1+1}</div>
                    <div className={cName}></div>
                    <div>{isGood? <strong>good</strong>: null}</div>
                    <div>{(function () { return 'ao li gei'})()}</div>
                </div>

                <div className="2.监听事件">
                    <div onClick={this.handleClick.bind(this)}></div> {/*bind 会把实例方法绑定到当前实例上,然后我们再把绑定后的函数传给 React.js 的 onClick 事件监听*/}
                    <Header onClick={} /> {/*********组件标签无法使用监听事件*/}
                </div>

                <div className="3.渲染列表数据">
                    {users.map((user, i) => <User key={i} user={user} />)} {/* 最好是后台数据返回的 id 作为列表元素的 key*/}
                </div>

                <div className="4.ref进行的dom操作"> {/* 多余的DOM 操作是代码里面的“噪音”,尽量不用ref*/}
                    <input type="text" ref={(input)=>this.input = input}/>  {/* 已经成为组件实例的一个属性,可以this.input直接获取到dom元素 */}
                    <Clock ref={(clock) => this.clock = clock} /> 
                </div>

                <div className="5.dangerouslySetHTML渲染">{/* 非转义渲染html 不常用*/}
                    <div dangerouslySetInnerHTML={{__html: this.state.hContent}}></div>
                </div>

                <div className="6.style"> {/* style接受对象键值对 原 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名*/}
                    <h1 style={{fontSize: '12px', color: 'red'}}>hello world</h1>
                    <h1 style={{fontSize: '12px', color: this.state.color}}>hellow world</h1>
                </div>
              </div>
            )
        }
    }


    2.//函数式组件（尽量少地用 state,尽量多地用 props,React.js 非常鼓励无状态组件,在 0.14 版本引入了函数式组件——一种定义不能使用 state 组件）
    class HelloWorld extends Component { //类组件原例
        constructor() {
          super()
        }
      
        sayHi () {
          alert('Hello World')
        }
      
        render () {
          return (
            <div onClick={this.sayHi.bind(this)}>Hello World</div>
          )
        }
    }

    const HelloWorld = (props) => { //函数式组件**********************
        const sayHi = (event) => alert('Hello World')
        return (
            <div onClick={sayHi}>Hello World</div>
        )
    }