react入门

Posted 2020-08-28 核桃园

应用场景：

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,
}