react入门

  • Z时代
  • 2024-01-10
  • 分类：综合

react

react入门

laiqun@msn.cn

1. react要解决的问题

降低页面从服务器和用户输入得到数据，来展示页面的过程的复杂性。

2. react中CSS的写法

1. css类选择器的写法: 以前是class,现在要改成className，原因是和ES6的javascript语法冲突，ES6可以用class类定义类

<style>

.alert-text{

 color:red;

}

</style>

<script type="text/jsx">

var Hello = React.createClass({

 render:function() {

     return <div className="alert-text">Hello {this.props.name} </div>;

 //{xxx}表示执行javascript表达式xxx 

 }

});

React.render(<Hello name="World")/>,document.getElementById('container'));

</script>

2. 内联样式的写法:styleObj的方法 ,并赋值给相应的组件属性

style="color:red" 

//在组件的属性里这样会报错，

//不再使用字符串的方式，而是使用对象，对象的每个键用驼峰命名

styleObje = {

  color:"red",

  fontSize:"44px"

};

var Hello = React.createClass({

    render:function() {

        return <div style ={styleObj} >Hello {this.props.name} </div>;

    //{xxx}表示执行javascript表达式xxx    

    }

});

3. react的生命周期

  1. 生命周期图 

状态说明：

  • Mounted：React Components被render解析生成相应的DOM节点，并被插入浏览器的DOM结构的一个过程。通俗的说就是能看到相应的节点时，就是Mounted完成了

  • Update: 一个mounted的Component被重新render的过程，只有state确实发生改变且影响到了DOM结构的时候，才重新渲染

  • Unmount: 一个mounted的Componet对应的DOM结构被从DOM结构中移除的过程。

  1. hook说明图：上图的每一个状态，都添加了相应的hook函数，详见下图

props和state的对比、相关性

  • 对比：props是有父组件传递给子组件的，一般认为给定了之后，不怎么发生变化;而state是组件私有的

  • 相关性：componentWillReceiveProps接收到props之后，可以对比之前的props，决定是否更新组件的state

4. react的事件绑定

命名方式：(类似onClick的驼峰命名，区别于原生html的全小写) 用props的方式存自身函数 

 

1. 回调函数中:获取到子组件的DOM(需要使用ref属性),操作DOM

var TestClickComponent = React.createClas({

    handleClicik:function(e){

        var tipE = React.findDOMNode(this.refs.tip);

        if(tipE.style.display === "none"){

            tipE.style.display ="inline";

        }else{

            tipE.style.display ="none";

        }

        e.stopPropagation();

        e.preventDefault();

    }

    render:function(){

        return (

            <div>

                <button onClick={this.}>显示|隐藏</button> <span ref="tip">测试点击</span>

            </div>

            );

    }

});  

 

  1. 回调函数中:更新state,引起相应重绘

    var TestInputComponent = React.createClass({
    getInitialState:function() {
       return {
             inputContent:''
       };
    },
    changeHandler:function(e){
       this.setState({
           inputContent:e.target.value
       });
       e.preventDefault();
       e.stopPropagation();
    }
    render:function(){
       return (
           <div>
               <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
           </div>
           );
    }
    });

 



来自为知笔记(Wiz)



以上是 react入门 的全部内容， 来源链接： utcz.com/z/382973.html

回到顶部