React初学手记

最新推荐文章于 2024-02-23 09:57:05 发布

记忆未来

最新推荐文章于 2024-02-23 09:57:05 发布

阅读量316

点赞数

分类专栏： javascript react 文章标签： react javascript

本文链接：https://blog.csdn.net/qq_36428934/article/details/68942349

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

HelloWorld

首先需要引入React的三个js依赖包,具体如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/react.js" ></script>
        <script type="text/javascript" src="../js/react-dom.js" ></script>
        <script type="text/javascript" src="../js/browser.min.js" ></script>
    </head>
    <body>
        <div id="demo"></div>
        <script type="text/babel">
            ReactDOM.render(
                {/*总是demo*/}
                <h1>Hello,World</h1>,
                document.getElementById('demo')
            )
        </script>
    </body>
</html>

注意最后一个<script>标签的type值为text/babel,可以简单理解为此属性声明使用React的JSX语法,而非javaScript.
有时又会在其他地方看到type的值为text/jsx,区别在于babel可以使用es6的语法.
那么JSX又是什么呢?简单来说就是，JSX在遇到<时就当HTML解析，遇到{就当JavaScript解析。
上面的{/*总是demo*/}就好理解了,就是JavaScript的注释.

数组处理

jsx会自动展开数组里的元素

var arr=[1,2,3];
var arr2=[
        <p>p1</p>,
        <p>p2</p>,
    ]
ReactDOM.render(
    <div>{arr}{arr2}</div>,
    document.getElementById('demo')
)

组件

React.createClass 方法就用于生成一个组件类,首字母必须大写
顶层标签只能有一个:return <h1>Hello {this.props.name}</h1><p>sth</p>会报错
在添加属性时，class要写成className，for要写成htmlFor，因为class和for是JavaScript的关键字。

var Msg=React.createClass({
    render:function () {
        return <h1 className={this.props.class}>Hello {this.props.name}</h1>

    }
});
ReactDOM.render(
    <Msg name="peter" class="red"/>,
    document.getElementById('demo')
)

可以看到上面的代码中有this.props,作用就是向组件传递的参数可以在使用this.props中获得.

复合组件

直接上代码

var Component1 = React.createClass({
  render: function() {
    return (
      <h1>{this.props.prop1}</h1>
    );
  }
});

var Component2 = React.createClass({
  render: function() {
    return (
      <p>{this.props.prop2}</p>
    );
  }
});

var Final = React.createClass({
  render: function() {
    return (
      <div>
        <Component1 prop1={this.props.prop1} />
        <Component2 prop2={this.props.prop2} />
      </div>
    );
  }
});

ReactDOM.render(
  <Final prop1="one" prop2="two" />,
  document.getElementById('demo')
);

props

上面已经知道props可以向组件中传递自定义参数,那下面就介绍一下其他props相关知识
- 默认props
通过getDefaultProps设置组件默认属性值，当自定义属性和默认属性一样时，使用自定义属性.
- propTypes
propTypes可以验证传给组件的参数是否符合要求，也可以说是：定义组件需要接收什么养的参数类型

var Demo=React.createClass({
getDefaultProps:function(){
    return{
        myName:'defaultName'
    }
},
propTypes:{
    title:React.PropTypes.string.isRequired
},
render:function () {
    return <span title={this.props.title} name={this.props.myName}>{this.props.innerHtml}</span>
}
});

var data='124';
ReactDOM.render(
    <Demo title={data} innerHtml="demoText" myName='myName'/>,
    document.getElementById('demo')
)

上面demo希望得到一个字符串类型的title属性，如果类型错误或没有title属性(isRequired 必填)，则React会在控制台提出警告，但是代码依然可以执行。
最终span的name值为myName。

state

this.props 表示固定的参数，而 this.state 则是要与用户进行互动的。
那么既然有默认props，当然也少不了默认stategetInitialState,返回的对象可以通过this.state获取。
可以通过this.setState来修改state,并且在修改后会自动调用this.render方法再次渲染页面

var State=React.createClass({
    getInitialState:function(){
        return {flag:false};
    },
    handleClick:function(){
        this.setState(
                {
                    flag:!this.state.flag
                }
        );
    },
    render:function(){
        var innerHtml=this.state.flag?'true':'false';
        return (
            <div>
                <p>{innerHtml}</p>
                <button onClick={this.handleClick}>点击更换显示内容</button>
            </div>
        );
    }
});
ReactDOM.render(
    <State />,
    document.getElementById('demo')
)

真实DOM

获取真实DOM需要在标签中添加ref属性,之后便可以this.refs.[ref值]获取.需要注意的是,此操作必须在DOM插入之后才能拿到真实DOM.

var RealDOM=React.createClass({
    handleClick:function(){
        console.log(this.refs.myInput.value);
    },
    render:function(){
        return (
            <div>
                <input type="text" ref="myInput" /> 
                <input type="button" value="input里有啥捏" onClick={this.handleClick} />
            </div>
        );
    }
});

ReactDOM.render(
    <RealDOM />,
    document.getElementById('demo')
)

除了此种方式之外,我们还可以使用findDOMNode()方法来获取DOM节点来进行一些DOM操作。此方法依然需要等到DOM插入之后才能获得真实DOM。

表单

因为表单一般是要和用户互动的,所以应使用this.state来操作

var Form=React.createClass({
    getInitialState:function(){
        return {value:'initForm'}
    },
    handleChange:function(e){
        this.setState({
            value:e.target.value
        })
    },
    render:function(){
        var value=this.state.value;
        return(
            <div>
                <input onChange={this.handleChange} value={value}/>
                <p>{value}</p>
            </div>
        )
    }
})
ReactDOM.render(
    <Form />,
    document.getElementById('demo')
)

AJAX

此处采用jQuery的ajax来处理,当然,也可以选择其它ajax方式来实现.
componentDidMount会在组件已经插入DOM后执行.

var AjaxDemo=React.createClass({
    getInitialState:function () {
        return {
            name:'',
            age:''
        }
    },
    componentDidMount:function(){
        $.get(this.props.url,function (res) {
            var name=res.name;
            if(this.isMounted()){
                this.setState({
                    name:'peter',
                    age:18
                });
            }
        }.bind(this));
    },
    render:function () {
        return(
            <div>
                <p>Name:{this.state.name}</p>
                <p>age:{this.state.age}</p>
            </div>
        )
    }
});
ReactDOM.render(
    <AjaxDemo url='demo11.json'/>,
    document.getElementById('demo')
)

demo11.json内容如下

{
    "name":"peter",
    "age":"18"
}

组件的生命周期

上面使用的componentDidMount就是生命周期的方法之一。

组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM

生命周期方法有：
- componentWillMount()：完成首次渲染之前调用，此时仍可以修改组件的state。
- componentDidMount()：完成首次渲染之后调用。如果要和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
- componentWillUpdate(object nextProps, object nextState)：重新渲染（render）之前调用，此时不允许更新props或state。
- componentDidUpdate(object prevProps, object prevState)：渲染结束调用
- componentWillUnmount()：移出DOM之前调用
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件是否应当渲染新的props或state，通常不需要使用。

var Lifecycle=React.createClass({
    getInitialState:function () {
        return {
            fontSize:10
        };
    },
    componentDidMount:function(){
        this.timer=setInterval(function () {
            var fontSize=this.state.fontSize;
            fontSize+=2;
            if(fontSize>30){
                fontSize=10;
            }
            this.setState({
                fontSize:fontSize
            });
        }.bind(this),1000);
    },
    render:function () {
        return (
            <div style={{fontSize:this.state.fontSize}}>
                {this.props.name}
            </div>
        )
    }
});
ReactDOM.render(
    <Lifecycle name="lifecycle"/>,
    document.getElementById('demo')
)