react的三大基本属性

1、如何使用React
1、引入库
1、react
2、react.dom
3、babel
2、指定一个位置用于展示react程序

3、渲染内容
ReactDOM.render(

,document.querySelector("#root"));

---

2、如何创建虚拟DOM元素
1、通过React.createElement方法

    React.createElement("div",{
        id:
        className
    },内容);// 内容可以是字符串数字虚拟DOM对象，也可以是一个数组。数组当中可以包含多个虚拟DOM对象
2、通过JSX创建虚拟DOM对象
    jsx---javascript xml
    语法：
        1、当遇到<标符的时候，会分析其中包含的是否为HTML标签，如果是则转换为正常浏览器可以识别的标签。
        2、当遇到{}，则按照JS来执行。如果在{}内直接写变量则是输出。
            {""}:输出字符串
            {123}：输出数字
            {{}}：对象无法直接输出。常用于将一个对象进行赋值的时候用的。比如style
            <div style={{}}></div>
        3、如果遇到<标签的时候，如果包含的内容首字母是大写，则作为组件来处理。
                查找是否有定义该组件，如果没有报错。
        4、定义事件
            在jsx当中定义事件与之前定义事件的区别：
                1、JSX当中定义的事件需要使用驼峰命名法。
                2、JSX事件所定的内容必须是函数。
            <button onClick={fn}>按钮</button>
        5、注释
            1、单选注释
                {
                    //
                }
            2、多行注释
                {/**/}
                {/*


                */}
        6、数组：在JSX当中的数组是可以直接展开。
            const arr = [1,2,3]
            {arr}// {123}
            const arr = [<div></div>,<h1></h1>]
            {arr}// <div></div><h1></h1>

            常用于列表的渲染。
               {
                    arr.map(v=>(
                        <div key={v}></div>
                    ))
               }

---

3、组件
1、如何定义
1、通过class
class App extends React.Component{
static propTypes = {
// age:PropTypes.number,// 确定类型必须是一个number
// age:PropTypes.number.isRequired,// 不允许为空

            }
            static defaultProps = {
               age:90
            }
            constructor(props){
                super(props);
                console.log(this.props.age);
                this.state = {
                   userName:"xixi",
                   userName2:"lala"
                }
            }
            render(){
                return (
                    <div onClick={()=>{
                        this.setState({
                            userName:"xxixixi"
                        },()=>{console.log(this.state.userName)})
                    }}>{this.props.age}</div>
                )
            }
        }
    2、通过函数
        function App(props){
            return (
                <div>{props.age}</div>
            )
        }
        App.propTypes = {
            // age:PropTypes.number,// 确定类型必须是一个number
            // age:PropTypes.number.isRequired,// 不允许为空

        }
        App.defaultProps = {
           age:90
        }
2、如何使用:
    <App age="12"></App>
    <App/>

3、组件需要注意：
    1、元素或组件必须要闭合。
    2、组件首字母必须要大写
    3、定义组件必须要有返回值，如果你想返回一个空的组件，返回null或false
    4、组件返回的内容有且只能是一个根元素。
4、复合组件
    由多个组件构成的组件称为复合组件。可以让自身包含组件进行功能上的分发。
5、props 属性
    1、不允许修改。
    2、属性的使用：
        1、如何传
        2、如何接收
        3、如何进行约束
            1、引入prop-type.js。都是静态属性
                1、对类型以及是否为空进行约束
                2、可以设置默认值
6、state 状态：
    1、是可以被修改的。在函数组件当中是没有state.
    2、在哪里创建

7、ref

---

生命周期：React组件从创建到销毁的过程称为React生命周期。
在生命周期当中所暴露出来的函数称为钩子函数。
1、挂载阶段
1、constructor 构造器
2、componentWillMount 挂载之前 运行一次
3、render 渲染的内容
4、componentDidMount 完成挂载 运行一次
2、更新阶段
1、更新props
1、componentWillReceiveProps 当属性发生变化时执行
2、shouldComponentUpdate(nextProps,nextState) 要返回一个bool值。true 更新false不更新
3、componentWillUpdate(nextProps,nextState) 更新数据之前
4、render
5、componentDidUpdate(preProps,preState) 更新数据完成之后
2、更新state
1、shouldComponentUpdate(nextProps,nextState) 要返回一个bool值。true 更新false不更新
2、componentWillUpdate(nextProps,nextState) 更新数据之前
3、render
4、componentDidUpdate(preProps,preState) 更新数据完成之后
3、销毁阶段
componentWillUnmount

---

受控组件：受react状态影响的组件称为受控组件。
onChange结合使用。