react（上）

发布时间：2020-12-15 20:26:17 所属栏目：百科来源：网络整理

导读：1.react模板和组件类：组件类：以标签的形式使用，是可以自己定义的，但是不能与h5的标签同名，而且首字母必须大写。模板只能有一个顶层标签 2.ReactDOM.render()是将末班添加到指定容器（div）中去，如果模板东西太多则可使用组件类。 3.props是当前组件

1.react模板和组件类：

组件类：以标签的形式使用，是可以自己定义的，但是不能与h5的标签同名，而且首字母必须大写。

模板只能有一个顶层标签

2.ReactDOM.render()是将末班添加到指定容器（div）中去，如果模板东西太多则可使用组件类。

3.props是当前组件的组件标签身上所有属性和子节点构成的集合。可以通过console.log（this.props）查找，当没有子节点时children会显示undefined，只有一个子节点时children会是一个json，两个或两个以上是数组。所以在遍历上很有难度，所以react有了专门针对组件标签子节点便利的方法：React.Children.map()

 {//react专门针对标签子节点遍历React.Children.map（）
          React.Children.map(this.props.children,function (value,index){
           return  <p>{value}</p>
    })
}

4.refs:用于我们好去虚拟DOM

　　给需要获取的dom加点添加ref属性，届时就可以通过this.ref.(属性值)获取真实dom，注意：虚拟dom只有等到被插入文档后才能获取，所以往往需要使用事件来触发

说到这里不得不提一下react事件的表示方式：要使用驼峰法，原来的onclick变为onClick

事件方法的调用用{this.fn} 因为我们创建的是类，类规定将方法都写在类内部

5。state：和props一样，props是一个静态值，一旦设定不需要改变，往往是请求的网络地址。

state是一个状态值，这个值可以发生改变，react有一个自己的方法改变：this.setState()

 var App1=React.createClass({
        getInitialState(){//设置state初始值
            return{
                name:"state"
            }
        },fn(){//react专门改变state的方法：this.setState（）
            this.setState({
                name:"改变后的state"
            })
        },

6.input? ?文本框在react中不能使用传统的获取方法。得使用事件源

var App1=React.createClass({
        getInitialState(){//设置state初始值
            return{
                title:""
            }
        },fn(ev){
            this.setState({
                title:ev.target.value//读取用户输入值
            })
        },render(){
            console.log(this)
            return(
                <div>
                    <input type="text" onChange={this.fn}/>
                    <p>{this.state.title}</p>
                </div>
            )
        }
    })

7钩子函数和ajax：componentDidMount(){

$.aiax({ type:"get",

　　　　url:"./xx/txt",

　　　　async:true,

　　　　success.function(res){

xonsolxonsole.log(res)

}):

}

以上就是一些react的小点，希望能给大家一些帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!