Reactreact是一个声明式，高效且灵活用于构建用户界面的JavaScript框架。使用react可以将一些简短的，

1.react是什么？

react是一个声明式，高效且灵活用于构建用户界面的JavaScript框架。使用react可以将一些简短的，独立的代码片段组合成复杂的UI界面，这些代码片段称为组件。

2.React JS 引用

引入js文件,一定要按顺序引用

<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./browser.min.js"></script>

一共用了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能， browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。

type="text/babel"

 <script type="text/babel">

<script> 标签的 type 属性为 text/babel，
这是React 独有的 JSX 语法，
跟 JavaScript 不兼容。
凡是在页面中直接使用 JSX 的地方，都要加上 type="text/babel"。

3.jsx

什么是jsx

jsx是JavaScript的一种语法扩展，运用于React架构。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。 可以任意的在jsx中使用JavaScript的表达式，在jsx中表达式要放在大括号里Reactdom.rander()将react元素渲染到dom节点中

例一：
ReactDom.render(
    <Main></Main>,//代码片段也是唯一的，如果有多个，加一个<div></div>根元素把代码片包裹起来
    doucument.getElementById('app')//这的app是根元素，唯一的
)

例二：
const list=(
    <div>
        <h1>hello</h1>
        <h2>shimei</h2>
    </div>
);
ReactDom.render(
    list,
    doucument.getElementById('app')
)

模块和组件
- 模块：一般就是一个js文件，向外提供特定功能的jsx程序
- 组件：用来实现特定（局域）功能的效果的代码集合（html/css/js），每个组件只关心自己的逻辑部分，彼此之间独立

3.1 组件的定义

函数与类定义组件的区别

函数定义组价：无状态组件，没有办法修改父组件里的东西类定义组价：有状态组件，可以自定义方法，修改里面的值（state属性修改数据）

法一：函数式

const Wel=()=>{
    return <h1>hello</h1>
}
ReactDOM.render(
<wel></wel>,
doucument.getElementbyId('app')
)

法二：类

class Test extends React.component{
    render(){
         return (
         <h1>hello</h1>
         )
    }
}
ReactDOM.render(
<Test></Test>,
doucument.getElementbyId('app')
)

3.2组件的通信

子组件向父组件传值（传事件）

属性传值--props

函数 props.xx

const Wel=(props)=>{
    return <h1>{props.name}</h1>
}
ReactDOM.render(
<wel name='lxw'></wel>,
doucument.getElementbyId('app')
)

类 this.props.xx

class Test extends React.component{
    render(){
         return (
         {this.props.name}
         )
    }
}
ReactDOM.render(
<Test name='lxw'></Test>,
doucument.getElementbyId('app')
)

props.childeren

    <script type="text/babel">
    
        class Welcome extends React.Component{
            render(){
               return (
                   <h1>你好{this.props.children}</h1>
                   
               )
            }
        }
        ReactDOM.render(
            <Welcome>
                <div>欢迎来到李小文世界</div>    
            </Welcome>,
            document.getElementById('app')
        )
    
    
    </script>

3.3 state(动态的)

state定义

state是组件对象最重要的属性，值是对象（可以包含多个数据），用于改变组件内同用状态的值

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

state初始化状态

  class Num extends React.Component{
         constructor(props){
             super(props);
             this.state={
                 count:1
             }
         }
     }

state读取某一个值

 this.state.XXX
 读取上面count值,this.state.count

组件界面更新，不能直接修改state下面的属性值，必须调用this.setState()才能改变对象下的值

this.state.count++；//错误，不能直接修改count值，得在this.setState()里面修改
this.setState({
    count:this.state.count+1
});

state里面自定义的方法，可以通过this.state.XX去获得state里面的内容，但是自定义一方法，必须通过bind找到this指针

3.4 refs

组件内可以用ref属性来标识自己

    <input type="text" ref={input=>myInput=input}/>

在组件中可以通过this.myInput来得到对应的真实DOM元素

console.log(this.myInput.value)//value是一个属性，直接拿到里面的值

作用：通过ref获取组件内容特定标签对象，进行读取其相关数据或者通过refs属性取DOM元素，官方推荐第一种方式

    不推荐，但是与上面是一个意思
    <input type="text" ref="name"/>
    console.log(this.refs.name.value)

3.5 给组件绑定事件

React事件绑定属性的命名采用驼峰式写法（eg:onClick）
自定义方法通过bind改变this指向形参event可以取到,如果不绑定bind则this指针为undefinde

实例一：
  
    class Num extends React.Component{
         constructor(props){
             super(props);
             this.state={
                 count:1
             }
             this.add=this.add.bind(this)//这一步必须写，要不this指针undefined
         }
     }
     add(){
        this.setState({
          count:this.state.count+1
        });
     }
     render(){
         return(
             <button onClick={this.add}></button>//不能写成this.add()
         )
     }

3.6

下面这个例子中Main为父组件，Inputls List为子组件

 <script type="text/babel">
        class Inputls extends React.Component{
            constructor(props){
                super(props);
                this.add=this.add.bind(this)
            }
            add(){
                if(this.myInput.value!=''){
                console.log(this.myInput.value)
                this.props.add(this.myInput.value)
                this.myInput.value=''
                }
            }
            render(){
                return  (
                    <div>
                        <input type="text" ref={input=>this.myInput=input}/>
                        <button onClick={this.add}>add</button>    
                    </div>
                )
                
            }
        }
        
        
        
        class List extends React.Component{
            render(){
                return (
                    <ul>
                       {    
                            this.props.todos.map((value,index)=>{
                                return <li key={index}>{value}</li>
                            })
                        }
                    </ul>
                )
            }
        }
        
        
        class Main extends React.Component{
            constructor(props){
                super(props);
                this.state={
                    todos:[1,288,3]
                }
                this.addFun=this.addFun.bind(this)
            }
            addFun(value){
                //数组不能直接传，要不会传的是地址
                let todos=[...this.state.todos]
                todos.push(value)
                this.setState({
                    todos
                })
            }

            render(){
                return <div>
                        <h3>TO DO LIST</h3> 
                        <Inputls add={this.addFun}/>,//传方法
                        <List todos={this.state.todos}/>//传变量值
                        </div>
            }
        }

    ReactDOM.render(
        <Main/>,
        document.getElementById('app')
    )
    
    </script>