React基本语法知识

1.angular react vue区别

　　1.angular 1.x mvc 2.x mvvm

　　　　　　都给你限制了 $http -> ajax

　　2. vue2 mvvm框架不限制
　　　　　　推荐
　　　　　　　　vue-resource
　　　　　　　　axios
　　　　　　　　xmlhttp

　　3.react 更专注于view层

　　　　react
　　　　　　优势：
　　　　　　　　1.虚拟dom
　　　　　　　　2.性能性很高
　　　　　　　　3.解决一些终端的问题（pc、移动端问题）

　　　　　　劣势：
　　　　　　　　1.学习成本很高、学习曲线很陡
　　　　　　　　2.react本身能做的事并不多，想做大东西必须得用react插件（全家桶）

　　4.react - vue、ng不同的一点： react不限制你的使用方式

2.理解作者思想 --》接受它的世界观---》接受它的中二设定--》自定义语法 - jsx

3.书写格式

　　1.多个标签的书写格式 - 外面必须包一层根元素，可以自由缩进

　　2.单标签规则 - 必须闭合

　　3.class - className引用样式

　　4.jsx里面使用js代码必须加{}

　　5.jsx - 支持style - 里面使用json {{'background':'red'}}---》第一层是使用告诉jsx我要用js了---》第二层的是json的

　　6.事件：使用驼峰命名法 ---》第一个单词之后的首字母大写---》onclick -> onClick----》onmouseover -> onMouseOver

4.面向对象

　　1.es6之前那种函数 -new 函数 = 类

　　　　类 - constructor
　　　　原型 - prototype （所谓的方法）
　　　　原型链 - __proto__

　　2.es6=class

　　　　constructor - 默认执行的函数
　　　　不支持变量提升

　　　　class 函数名称---》函数调用时默认执行 constructor 函数----》constructor - 里面写一些初始的内容

　　3.继承 extends 可以继承原型和私有属性　　　　

　　　　如果子类想使用 this---》子类constructor 放入super ---》参数如果想使用，子类参数放入 constructor 和 super 中

5.获取元素起码有三种方法

　　1.<input ref='aaa'/> 获取：this.refs.aaa

　　2.获取本身事件源 e.target

　　3.原生js的获取方法

6.react生命周期

　　　　 componentWillMount() {
            console.log('组件挂载之前---但是可以拿到state和props属性中的值--但是找不到组件还没挂挂载呢')
        }
        componentDidMount() {
            console.log('组件挂载之后---可以找到组件元素了')
        }
        componentWillUpdate() {
            console.log('组件更新前--数据更新前')
        }
        componentDidUpdate() {
            console.log('组件更新后---数据更新后')
        }
        componentWillUnmount() {
            console.log('组件卸载之前')
        }

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

7.react阻止事件冒泡　　

　　　　//return false;
　　　　//e.stopPropagation();
　　　　//e.cancelBubble = true;
　　　　//e.nativeEvent.cancelBubble = true;
　　　　都不好使　　　　

　　　　e <-react封装过的nativeEvent 原生的事件对象　　　　

　　　　e.nativeEvent.stopImmediatePropagation()停止立即的传播

8.react表单---(前面加default属性)

　　　　input --->受控表单/非受控表单受控

　　　　value='' checkbox defaultValue='' defaultChecked=''

9.react交互

　　　　并不限制你如何的去交互

　　　　angular - $http

　　　　vue - re....

　　　　react - jquery/zepto/axios/fetch/ajax

10.react --for循环和显示隐藏　　

   class Yxk extends React.Component{
        constructor(){
            super()
            this.state={
               msg:'hello React!',
               arr:[1,2,3,4]
            }
        }
        render(){
            let arrLi=[]
            this.state.arr.forEach((val,index)=>{
                arrLi.push(<li key={index}>{val}</li>)
            })
            return (<div>
                    <p style={{display:this.state.arr.length>0?'none':'block'}}>{this.state.msg}</p>
                    <ul>
                        {arrLi}
                    </ul>
                </div>) 
        }
       
    }
    ReactDOM.render(
        <Yxk />,
        app
    )

　　虚拟dom 每一个内容都应该有自己的唯一标识key

11.react组件通讯传值

　　1.父给子组件传值

　　　　this.props.msg

　　　　默认情况下父组件从新渲染会统一同步 ---》不想同步就把父组件的值存成子组件的一个state

　　2.子组件拿父组件值

　　　　<Child fn={父组件的一个函数.bind(this)}; ---重置this为父组件不然无法渲染值

　　　　子组件里面执行函数----》this.props.fn(传入子组件的数据)