码迷,mamicode.com
首页 > 其他好文 > 详细

react入门

时间:2017-01-18 13:37:39      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:selected   ntb   round   neu   上下   cli   default   selector   option   

应用场景:

1.复杂场景下的高性能

2.重用组件库,组件组合

3.

 

  react.main.js react的核心库

  react-dom.js 与dom相关的功能

    browser.main.js 用于将jsx语法转化为js语法

 

组件生命周期:

 状态:

  Mounting:已插入真实DOM

  Updating:正在被重新渲染

  UnMounting:已移除真实DOM

   方法:

  componentWillMount 在渲染前调用,在客户端也在服务端

  componentDidMount 在第一次渲染后调用,只在客户端。之后组件已经生成了对于的DOM结构,可以通过this.getDOMNode()来进行访问。

  componentWillReceiveProps 在组件接收到一个新的prop时被调用,初始化时不会被调用。

  shouldComponentUpdate 返回布尔值,在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

   componentWillUpdate 在组件接收到新的props或者state但还没render时被调用,在初始化时不会被调用。

  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

   componentWillUnmount 在组件从DOM中移除时立即被调用。

 

添加样式:
   添加类名,给类名添加样式 注意:class在es6中是关键字,得写成className
   行内样式,style={{color:‘red‘}}或者style={obj},obj是定义的对象形式的变量

   

    css: 

      .divbox {
        font-size: 24px;
      }

    js:
  
    var Hello = React.createClass({ render: function() { var obj = {color: ‘red‘}; return <div className="divbox" style={obj}>Hello {this.props.name}</div>; } }); ReactDOM.render(<Hello name=‘world‘ />,document.getElementById(‘container‘));

 

注释

render:function(){
    return (
          {/*注释*/}    
    )    
}

 

表达式

        return (
         <div>
<h4>计算:{1+1}</h4> <h4>三元表达式:{1===1?true:false}</h4> </div> );

 

数组

    var arr = [
            <h4>数组元素1</h4>,
            <h4>数组元素2</h4>
        ]return (            
                <div style={{opacity: this.state.opacity}}>
                    {arr}                   
                </div>

            );

 

ref

通过给元素设置的ref获取到dom结构

        handleClick: function(event) {
                {/*
                        <!-- 通过 ref获取到dom结构 -->
                */}
                
                var tipE = ReactDOM.findDOMNode(this.refs.tip);
                if(tipE.style.display == none) {
                    tipE.style.display = inline;
                }else {
                    tipE.style.display = none;
                }
                {/*
                <!-- 阻止默认事件 -->
                */}
                
                event.stopPropagation();
                event.preventDefault();
            },
            render: function() {
                return (<div>
                    <button onClick={this.handleClick}>显示|隐藏</button><span ref=‘tip‘>测试点击</span>
                </div>);
            }

注:代码中嵌套多个html标签时,需要使用一个div元素包裹

state

  初始化:   

      getInitialState: function() {
                alert(initial);
                return {
                    opacity: 1.0,
                    fontSize: 20px
                };
            }

  修改:

        componentDidMount: function() {
                alert(did);
                var _self = this;
                window.setTimeout(function(){

                    _self.setState({
                        opacity: 0.5,
                        fontSize: ‘40px‘
                    })
                },1000)
            }

 

渲染react组件

    ReactDOM.render(<div>
            <ClickEvent/>
            <TestClickComponent/>
            <TestInputComponent/>
            <HelloMessage />
        </div>,document.getElementById(container));

注:有多个组件时需要使用一个div元素包裹。

 

事件

      changeHandeler: function(event) {
                event.stopPropagation();
                event.preventDefault();
                this.setState({
                    inputContent: event.target.value
                })
            },
            render: function() {
                return (
                    <div>
                        <input type="text" onChange={this.changeHandeler}/><span>{this.state.inputContent}</span>
                    </div>);    
            }

 

父子组件

  子组件上使用表单  onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面

    //定义子组件
    var
Content = React.createClass({ render: function() { return <div> <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> <h4>{this.props.myDataProp}</h4> </div>; } }); var HelloMessage = React.createClass({
       //初始化state getInitialState: function() {
return {value: Hello Runoob!}; },
       //改变state的值 handleChange: function(
event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return <div>
            {/*将state和change事件函数传递给子组件*/} <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } });

 

 

  

sublime的react插件

Emmet:

  自动扩展react的className

 配置:Preference -> Package Settings -> Emmet -> KeyBindingd-User贴上下面的代码:  

  

[{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab",
 
    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR.
    // Examples: source.js, text.html - source
    "context": [{
            "operand": "source.js",
            "operator": "equal",
            "match_all": true,
            "key": "selector"
        },
 
        // run only if there‘s no selected text
        {
            "match_all": true,
            "key": "selection_empty"
        },
 
        // don‘t work if there are active tabstops
        {
            "operator": "equal",
            "operand": false,
            "match_all": true,
            "key": "has_next_field"
        },
 
        // don‘t work if completion popup is visible and you
        // want to insert completion with Tab. If you want to
        // expand Emmet with Tab even if popup is visible -- 
        // remove this section
        {
            "operand": false,
            "operator": "equal",
            "match_all": true,
            "key": "auto_complete_visible"
        }, {
            "match_all": true,
            "key": "is_abbreviation"
        }
    ]
}]

    babel: 支持ES6、.jsx代码语法高亮

    jsformat: 

  js格式化,通过修改它的e4x属性可以使它支持jsx。  

  配置:Preference -> Package Settings -> JsFormat -> Settings-User贴上下面的代码:

 

 {
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}

 

react入门

标签:selected   ntb   round   neu   上下   cli   default   selector   option   

原文地址:http://www.cnblogs.com/lhy-93/p/6296357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!