React（一）

作者: osoLife | 来源:发表于2017-06-26 06:48 被阅读0次

特点

声明式设计
高效
灵活
JSX
组件
单向数据流

第一个实例

<!--React的核心库-->
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<!--提供与DOM相关的功能-->
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<!--将ES6代码转换为ES5代码-->
<script src="https://cdn.bootcss.com/babel-standalone/6.25.0/babel.js"></script>

<div id="box"></div>
<!--如果需要使用JSX，则<script>标签的type属性需要设置为text/babel-->
<script type="text/babel">
     // render方法用于将模板转化为HTML语言，并插入指定的DOM节点
     ReactDOM.render(
          // 将h1标题插入id="box"的节点中
          <h1>hello react</h1>,
          document.getElementById('box')  
     );
</script>

JSX

<div id="box"></div>
<script type="text/babel">
     ReactDOM.render(
         <div>
              <h1>hello world</h1>
              <h2>hello react</h2>
              {/*添加自定义属性需要使用data-前缀*/}
              <p data-myattribute="somevalue">
                  my name is osoLife,i love react
              </p>
         </div>,
         document.getElementById('box')
     );
</script>

JS表达式

<div id="box"></div>  
<script type="text/babel">
     ReactDOM.render(
         <div>
             {/*表达式写在{}中*/}
             <h1>{1+1}</h1>
         </div>,
         document.getElementById('box')
     );
</script>

<!--在JSX中不能使用if else语句，但可以使用三元运算来替代-->

样式

<div id="box"></div>  
<script type="text/babel">
     var myStyle={
         fontSize:50,
         color:'#ccc'
     };

     ReactDOM.render(
         <h1 style={myStyle}>React推荐使用内联样式</h1>,
         document.getElementById('box')
     );
</script>

数组

<!--JSX允许在模板中插入数组，数组会自动展开所有成员-->
<div id="box"></div>  
<script type="text/babel">
     var arr=[
         <h1>hello world</h1>,
         <p>hello react</p>            
     ];

     ReactDOM.render(
         <div>{arr}</div>,
         document.getElementById('box')
     );
</script>

HTML标签&React组件

<!--要渲染HTML标签，只需在JSX里使用小写字母的标签名-->
<div id="box"></div>  
<script type="text/babel">
     // 在添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JS的保留字
     var myDivElement=<div className="example" />;
     ReactDOM.render(
         myDivElement,
         document.getElementById('box')
     );
</script>

<!--要渲染React组件，只需创建一个大写字母开头的本地变量-->

组件

<!--将代码封装成一个组件，然后像插入HTML标签一样在网页中插入这个组件-->
<!--弃用的写法：ES5-->
<div id="box"></div>
<script type="text/babel">
     // 创建一个名为HelloReact的组件
     var HelloReact=React.createClass({
         render:function () {
             return <h1>hello react</h1>;
         }
     });

     ReactDOM.render(
         <HelloReact />,
         document.getElementById('box')
     );
</script>

<div id="box"></div>
<script type="text/babel">
     // 通过this.props对象向组件中传递参数
     var HelloReact=React.createClass({
         render:function () {
              return <h1>hello {this.props.name}</h1>;
         }
      });

      ReactDOM.render(
         <HelloReact name="react" />,
         document.getElementById('box')
      );
</script>

<!--推荐的写法：ES6-->
<div id="box"></div>
<script type="text/babel">       
     class HelloReact extends React.Component {
          // 所有的组件类都必须有自己的render方法用于输出组件
          render() {
              return <h1>hello {this.props.name}</h1>;
          }
     }

     ReactDOM.render(
          <HelloReact name="react" />,
          document.getElementById('box')
     );
</script>

复合组件

<div id="box"></div>
<script type="text/babel">       
     class WebSite extends React.Component {
          render() {
              return (
                  <div>
                      <Name name={this.props.name} />
                      <Link site={this.props.site} />
                  </div>
              );
          }
     }

     class Name extends React.Component {
          render() {
              return (
                  <h1>{this.props.name}</h1>
              );
          }
      }

      class Link extends React.Component {
          render() {
              return (
                 <a href={this.props.site}>
                       {this.props.site}
                 </a>
              );
          }
      }

      ReactDOM.render(
          <WebSite name="百度" site="https://www.baidu.com"/>,
          document.getElementById('box')
      );
</script>

State（状态）

<!--方法一-->
<div id="box"></div>
<script type="text/babel">    
     class MyButton extends React.Component {
           constructor(props) {
                super(props);
                this.handleClick=this.handleClick.bind(this);
                this.state={
                    liked:false
                }
           }

           handleClick(e) {
                this.setState({liked:!this.state.liked});
           }

           render() {
                var text=this.state.liked?'喜欢':'不喜欢';
                return (
                    <p onClick={this.handleClick}>
                        你<b>{text}</b>我
                    </p>
                );
           }
     }

     ReactDOM.render(
          <MyButton />,
          document.getElementById('box')
     );
</script>

<!--方法二-->
<div id="box"></div>
<script type="text/babel">       
      class MyButton extends React.Component {
            state = {
                liked:false
            }

            constructor(props) {
                super(props);
                this.handleClick=this.handleClick.bind(this);
            }

            handleClick(e) {
                this.setState({liked:!this.state.liked});
            }

            render() {
                var text=this.state.liked?'喜欢':'不喜欢';
                return (
                    <p onClick={this.handleClick}>
                        你<b>{text}</b>我
                    </p>
                );
            }
      }

      ReactDOM.render(
          <MyButton />,
          document.getElementById('box')
      );
</script>

Props

<!--可以把props看成是组件的配置属性，在调用这个组件时传入不同的属性来定制显示这个组件-->
<!--state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变，有些组件需要定义state来更新和修改数据，而子组件只能通过props来传递数据。-->
<div id="box"></div>
<script type="text/babel">       
    class HelloReact extends React.Component {
        render() {
            return <h1>Hello {this.props.name}</h1>;
        }
    }

    ReactDOM.render(
         <HelloReact name="React" />,
         document.getElementById('box')
    );  
</script>

默认Props

<!--方法一-->
<div id="box"></div>
<script type="text/babel">       
    class HelloReact extends React.Component {
        render() {
            return <h1>Hello {this.props.name}</h1>;
        }

        // 组件内部使用static
        static defaultProps={
            name:'React'
        }
    }
        
    ReactDOM.render(
         <HelloReact />,
         document.getElementById('box')
    );             
</script>

<!--方法二-->
<div id="box"></div>
<script type="text/babel">       
    class HelloReact extends React.Component {
        render() {
            return <h1>Hello {this.props.name}</h1>;
        }
    }

    // 组件外部
    HelloReact.defaultProps={           
        name:'React'
    }

    ReactDOM.render(
        <HelloReact />,
        document.getElementById('box')
    );             
</script>

State和Props

<!--在父组件中设置state，并通过在父组件上使用props将其传递到子组件上-->
<div id="box"></div>
<script type="text/babel">  
     class WebSite extends React.Component {
         constructor(props) {
            // 调用super()将props传递给React.Component
            super(props);
            // 初始化state的工作要在constructor中完成
            this.state={
                name:'百度',
                site:'https://www.baidu.com'
            };
         }

         render() {
              return (
                  <div>
                    <Name name={this.state.name} />
                    <Link site={this.state.site} />
                  </div>
              );
         }
     }
      
     class Name extends React.Component {
          render() {
              return (
                  <h1>{this.props.name}</h1>
              );
          }
      }

     class Link extends React.Component {
          render() {
              return (
                <a href={this.props.site}>
                    {this.props.site}
                </a>
              );
          }
      }

     ReactDOM.render(
          <WebSite />,
          document.getElementById('box')
     );
</script>

Props验证

<div id="box"></div>
<script type="text/babel">  
    var title="Hello React";
    class HelloReact extends React.Component {
          render() {
              return <h1>{this.props.title}</h1>; 
          }
     }

     HelloReact.propTypes={
          title:React.PropTypes.string.isRequired
     }

     ReactDOM.render(
          <HelloReact title={title} />,
          document.getElementById('box') 
     );
</script>
<!--props-types的独立与react.PropTypes的弃用-->
<!--由于ES6类中只允许定义方法并不允许定义类属性，所以propTypes、getDefaultTypes、displayName还有contextType等组件属性都要放到类外面来赋值。-->

组件API

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

setState（设置状态）

<div id="box"></div>
<script type="text/babel"> 
     class Counter extends React.Component {
          constructor() {
              super();
              this.state={
                  clickCount:0
              };
              this.handleClick=this.handleClick.bind(this);
           }

           handleClick() {
              this.setState(
                  function (state) {
                      return {
                          clickCount:state.clickCount+1
                      }
                  }
              );
           }

           render() {
                return (
                    <h2 onClick={this.handleClick}>点我！点击次数为：{this.state.clickCount}</h2> 
                );
           }
     }

     ReactDOM.render(
           <Counter />,
           document.getElementById('box')
     )
</script>

组件生命周期

三个状态：
Mounting：已插入真实DOM
Updating：正在被重新渲染
Unmounting：已移出真实DOM

方法：
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

componentDidMount示例

<!--通过componentDidMount方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染-->
<div id="box"></div>
<script type="text/babel"> 
     class HelloReact extends React.Component {
         constructor() {
             super();
             this.state={
                 opacity:1
             };
         }

         componentDidMount() {
             this.timer=setInterval(function () {
                  var opacity=this.state.opacity;
                  opacity-=.05;
                  if(opacity<0.1){
                      opacity=1;
                  }
                  this.setState({
                      opacity:opacity
                  });
             }.bind(this),100);
         }

         render() {
             return(
                 <div style={{opacity:this.state.opacity}}>
                      Hello {this.props.name}
                 </div>
             )
         }
     }

     ReactDOM.render (
          <HelloReact name="osoLife" />,
          document.getElementById('box')
     );
</script>

<!--初始化state，setNewNumber用于更新state。所有生命周期在Content组件中-->
<div id="box"></div>
<script type="text/babel"> 
     class Button extends React.Component {
         constructor() {
             super();
             this.state={
                 data:0
             };
             this.setNewNumber=this.setNewNumber.bind(this);
         }

         setNewNumber() {
             this.setState({
                data:this.state.data+1
             });
         }

         render() {
             return(
                 <div>
                    <button onClick={this.setNewNumber}>increament</button>
                    <Content myNumber={this.state.data}></Content>
                 </div>
             )
         }
     }

     class Content extends React.Component {
         componentWillMount() {
             console.log('Component Will Mount');
         }

         componentDidMount() {
             console.log('Component Did Mount');
         }

         componentWillReceiveProps(newProps) {
             console.log('Component Will Receive Props');
         }

         shouldComponentUpdate(newProps,newState) {
             return true;
         }

         componentWillUpdate(nextProps,nextState) {
             console.log('Component Will Update');
         }

         componentDidUpdate(prevProps,prevState) {
             console.log('Component Did Update');
         }

         componentWillUnmount() {
             console.log('Component Will Unmount');
         }

         render() {
             return (
                 <div>
                    <h3>{this.props.myNumber}</h3>
                 </div>
             );
         }
     }

     ReactDOM.render(
        <Button />,
        document.getElementById('box')
     )
</script>

AJAX（待续）

表单与事件

<div id="box"></div>
<script type="text/babel"> 
     class HelloReact extends React.Component {
        constructor() {
            super();
            this.state={
                value:'hello osoLife'
            };
            this.handleChange=this.handleChange.bind(this);
        }

        handleChange(event) {
            this.setState({
                value:event.target.value
            });
        }

        render() {
            var value=this.state.value;
            return (
                <div>
                    <input type="text" value={value} onChange={this.handleChange} />
                    <h4>{value}</h4>
                </div>
            );
        }
    }

    ReactDOM.render(
        <HelloReact />,
        document.getElementById('box')
    )
</script>

<div id="box"></div>
<script type="text/babel"> 
     class Content extends React.Component {
         render() {
             return (
                 <div>
                     <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
                     <h4>{this.props.myDataProp}</h4>
                 </div>
             );
         }
     }

     class HelloReact extends React.Component {
         constructor() {
             super();
             this.state={
                 value:'hello osoLife'
             };
             this.handleChange=this.handleChange.bind(this);
         }

         handleChange(event) {
             this.setState({
                  value:event.target.value
             });
         }

         render() {
             var value=this.state.value;
             return (
                 <div>
                     <Content myDataProp={value} updateStateProp={this.handleChange}>
                     </Content>
                 </div>
             );
         }
     }

     ReactDOM.render(
         <HelloReact />,
         document.getElementById('box')
     );
</script>

事件

<div id="box"></div>
<script type="text/babel"> 
     class HelloReact extends React.Component {
        constructor() {
            super();
            this.state={
                value:'hello world'
            };
            this.handleClick=this.handleClick.bind(this);
        }

        handleClick() {
            this.setState({
                value:'hello osoLife'
            });
        }

        render() {
            var value=this.state.value;
            return (
               <div>
                  <button onClick={this.handleClick}>click me</button>
                  <h4>{value}</h4>
               </div>
            );
        }
    }

    ReactDOM.render(
        <HelloReact />,
        document.getElementById('box')
    );
</script>

<div id="box"></div>
<script type="text/babel"> 
     class Content extends React.Component {
         render() {
             return (
                 <div>
                     <button onClick={this.props.updateStateProp}>click me</button>
                     <h4>{this.props.myDataProp}</h4>
                 </div>
             );
         }
     }

     class HelloReact extends React.Component {
         constructor() {
             super();
             this.state={
                 value:'hello osoLife'
             };
             this.handleClick=this.handleClick.bind(this);
         }

         handleClick() {
             this.setState({
                 value:'hello world'
             });
         }

         render() {
             var value=this.state.value;
             return (
                 <div>
                     <Content myDataProp={value} updateStateProp={this.handleClick}>                       
                     </Content>
                 </div>
             );
         }
     }
        
     ReactDOM.render(
         <HelloReact />,
         document.getElementById('box')
     );
</script>

Refs

<!--React支持一种非常特殊的属性Ref，可以用来绑定到render()输出的任何组件上。在其它代码中，通过this.refs获取支撑实例-->
<div id="box"></div>
<script type="text/babel"> 
     class MyComponent extends React.Component {
         constructor() {
             super();
             this.handleClick=this.handleClick.bind(this);
         }

         handleClick() {
             this.refs.myInput.focus();
         }

         render() {
             return (
                 <div>
                     <input type="text" ref="myInput" />
                     <button onClick={this.handleClick}>点击输入框获得焦点</button>
                 </div>
             );
         }
     }

     ReactDOM.render(
         <MyComponent />,
         document.getElementById('box')
     );
</script>

结束语

如果喜欢本文，记得点赞并加关注哟。

React（一）

特点

第一个实例

JSX

JS表达式

样式

数组

HTML标签&React组件

组件

复合组件

State（状态）

Props

默认Props

State和Props

Props验证

组件API

setState（设置状态）

组件生命周期

componentDidMount示例

AJAX（待续）

表单与事件

事件

Refs

结束语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web 前端开发