React使用

元素渲染

• 根节点渲染

      import ReactDOM from "react-dom";
      const element = 
  xxxx
  ;
      ReactDOM.render(element, document.getElementById('example'));
  

• 普通节点渲染

      // 方法
      function tick(){
          return 
  xxxx
      }
      //类
      import React, {Component} from "react";
      class Tick extends Component{
          render(){
              return 
  xxx
  ;
          }
      }
  

组件

• 方法写法

      function HelloMessage(props){
          return 
  Hello World!
  ;
      }
  

• 类写法

      import React, {Component} from "react";
      class Welcome extends React.Component{
          render(){
              return 
  Hello World!
  ;
          }
      }
  

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

```
    function Name(props) {
        return 
网站名称：{props.name}
;
    }
    function Url(props) {
        return 
网站地址：{props.url}
;
    }
    function Nickname(props) {
        return 
网站小名：{props.nickname}
;
    }
    function App() {
        return (
        

            
            
            
        
        );
    }
```

属性和状态

• 状态
  React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
  React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

      class Clock extends React.Component {
          constructor(props) {
              super(props);
              this.state = {date: new Date()};
          }
   
          render() {
              return (
              
  
                  
  Hello, world!
                  
  现在是 {this.state.date.toLocaleTimeString()}.
              
              );
          }
      }
      //初始化
      //在构建函数中使用
      this.state = {
          a: 1
      };
  
      //修改state
      //state不能直接修改
      this.setState({
          a: 2
      });
  
      //取值
      this.state.a
  

• 属性

      // 方法写法
      function HelloMessage(props) {
          return 
  Hello {props.name}!
  ;
      }  
      
      //类写法
      class HelloMessage extends Components{
          constuctor(props){
              super(props)
          }
          render(){
              return 
  Hello {props.name}!
  ;
          }
      }
  
      // 调用
      
  
      //默认props
      class HelloMessage extends React.Component {
          constuctor(props){
              super(props);
              this.props = {
                  name: "xxx"
              };
          }
          render() {
              return (
                  
  Hello, {this.props.name}
              );
          }
      }
  

• 属性验证
  15.5版本以后，已经从React.PropTypes移到prop-types库

      class MyTitle extends React.Component {
          render() {
              return (
                  
  Hello, {this.props.title}
              );
          }
      }
      MyTitle.propTypes = {
          title: PropTypes.string
      };
  

  15.4

      MyTitle.propTypes = {
          title: React.PropTypes.string
      };
  

事件处理

• 写法

      
          激活按钮
      
  

  方法写法

      function ActionLink() {
          function handleClick(e) {
              e.preventDefault();
              console.log('链接被点击');
          }
  
          return (
              
              点我
              
          );
      }
  

  类写法

      class Toggle extends React.Component {
          constructor(props) {
              super(props);
              this.state = {isToggleOn: true};
          }
   
          handleClick = () => {
              this.setState(prevState => ({
              isToggleOn: !prevState.isToggleOn
              }));
          };
   
          render() {
              return (
              
                  {this.state.isToggleOn ? 'ON' : 'OFF'}
              
              );
          }
      }
  

  自定义写法

      // 将方法存在一个对象里面,类似于vue
      class Toggle extends React.Component {
          constructor(props) {
              super(props);
              this.state = {isToggleOn: true};
          }
  
          methods = {
              handleClick: ()=>{
                  this.setState(prevState => ({
                      isToggleOn: !prevState.isToggleOn
                  }));
              },
          };
         
   
          render() {
              return (
              
                  {this.state.isToggleOn ? 'ON' : 'OFF'}
              
              );
          }
      }
  

条件渲染

```
    class Test extends Component{
        constructor(){
            this.state = {
                a: 1
            };
        }
        render(){
            return 
{this.state.a?"1":"0"}
        }
    }
```

列表渲染

```
    class Test extends Component{
        constructor(){
            this.state = {
                a: [1, 2, 3]
            };
        }
        render(){
            return 
{this.state.a.map(item=>{
                return item;
            })}
        };
    }

```

refs

class MyComponent extends React.Component {
        handleClick() {
            //获取到标签对象
            this.refs.myInput
            // 使用原生的 DOM API 获取焦点
            this.refs.myInput.focus();
            //获取input输入值
            this.refs.myInput.value;
        }
        render() {
            //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
            return (
            

                
                
            
            );
        }
    }