React入门(二)

上期 戳这里~

一.无状态组件

​ 顾名思义就是组件内部没有（不需要）state，无状态组件也可以理解为展示组件，仅做展示用，可以根据外部传来的props来渲染模板的内容，内部没有数据。

  //无状态组件：组件内部没有state，可以使用函数式组件。它只负责展示
    let Book = (props) => (
      <div>
        <p>书名：{props.name}</p>
        <p>作者：{props.author}</p>
      </div>
    );

仅仅只是一个函数，就ok了。

二.有状态组件

​ 有状态组件就是不但外部可以传入，内部也有state。

​ 有状态组件也可以理解为容器组件，用来容纳展示组件，在容器组件里处理数据的逻辑，把结果在展示组件里呈现。

​ 创建有状态组件如下：

 // 有状态组件：有state，负责数据的处理。
    class Books extends React.Component {//容器组件
      constructor(props) {
        super();
        this.state = {
          bookList: [
            {
              name: "三国",
              author: "罗贯中",
            },
            {
              name: "哆啦A梦",
              author: "哈哈哈",
            },
            {
              name: "皮卡丘",
              author: "xixi",
            },
          ],
        };
      }
      render() {
        return(
          <div>
            <h1>书籍列表</h1>
            <ul>
               {/*Book为展示组件*/}
              {this.state.bookList.map((item,index) => (
                <Book name={item.name} author={item.author} key={index}/> 
              ))}
            </ul>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books />
      </div>,
      document.getElementById("box")
    );

注意：

做项目时，经常会把有状态组件和无状态组件进行结合使用。

1）、 有状态组件：一般会使用类组件，处理数据的业务逻辑，包括和后端进行交互，获取数据。把数据传给无状态组件

2）、 无状态组件：一般会使用函数式组件，只做展示用，没有自己的数据，会接收有状态组件传来的数据。

三. 事件处理

3.1事件特点：

1、React 事件绑定属性的命名采用驼峰式写法，而不是小写。如：onClick。

2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

3、在 React 中另一个不同的是，不能使用return false 的方式阻止默认行为， 你必须使用 preventDefault。

4、事件处理函数里的this是undefined（啊………），如果希望事件处理函数里的this是React组件对象本身，则需要用bind。

3.2 事件语法

3.2.1格式

<JSX元素 onClick={this.实例方法|函数体} />

示例：

  class Books extends React.Component {
      constructor(props) {
        super();
      }
      fn(){
        console.log("点击了~");
      }
      render() {
        return(
          <div>
           <input type="button" value="测试" onClick={this.fn}/>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books />
      </div>,
      document.getElementById("box")
    );

重点来袭~

3.2.2事件处理函数里的this

事件处理函数里的this是undefined，如何让事件处理函数里的this是React组件对象本身

• 使用bind
  1）、构造器（构造函数）里：this.方法=this.方法.bind(this)
  2）、在事件绑定时写，onClick={this.方法.bind(this)}

 class Books extends React.Component {
      constructor(props) {
        super();
        // 1、使用bind，让事件处理函数了的this是react组件对象。bind不会调用函数，会绑定该函数，返回一个新的函数。
        // this.fn02 = this.fn01.bind(this);
        this.fn01=this.fn01.bind(this);
      }
      fn01(){
        console.log("点击了~");
        console.log("this",this);
      }
      render() {
        return(
          <div>
           <input type="button" value="测试01" onClick={this.fn01}/>
           {/*直接使用bind*/}
           <input type="button" value="测试02" onClick={this.fn01.bind(this)}/>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books />
      </div>,
      document.getElementById("box")
    );

• 使用箭头函数
  1）、事件绑定时，使用箭头函数：onClick={()=>this.方法()}

  class Books extends React.Component {
      constructor(props) {
        super();
       fn01(){
         console.log("点击了~");
        console.log("this",this);
       }
      render() {
        return (
          <div>   
           <input type="button" value="测试03" onClick={()=>this.fn01()}/>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books />
      </div>,
      document.getElementById("box")
    );

2）、定义方法时，直接使用箭头函数: 方法=()=>{箭头函数定义方法}

  class Books extends React.Component {
      constructor(props) {
        super();
      // 4、定义方法时，使用箭头函数
      fn04 = () => {
        console.log("点击了~");
        console.log("this", this);
      };
      render() {
        return (
          <div>
            <input type="button" value="测试04" onClick={this.fn04} />
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books />
      </div>,
      document.getElementById("box")
    );

3.2.3事件对象

event对象是经过react处理过的。

如何获取事件对象------直接声明即可。

实例方法(ev) ev 代理事件对象 ，ev.target 返回虚拟Vdom

事件对象的获取：

1）、直接声明（没有其它参数的情况下）

 //无其他参数
      fn01 = (ev) => {
        console.log("ev", ev);
        //    真实DOM
        console.log("ev.target", ev.target);
      };

 <input type="button" value="测试01" onClick={this.fn01} />

2）、箭头函数里直接声明（有其它参数的情况下）

 //    有其他参数
       // 注意：这已经不是事件处理函数了
      fn02 = (ev, str) => {
        console.log("ev", ev);
        console.log("ev.target", ev.target);
        console.log("str", str);
        console.log("this", this);
      };
//注意：给onClick绑定的函数，还是只有一个参数，这个参数就是事件对象，此处在绑定的函数里再调用另外一个函数进行传参
<input
              type="button"
              value="测试02"
              onClick={(ev) => this.fn02(ev, "hi")}
            />

注意：给事件属性绑定的函数，永远只会有一个参数，该参数就是事件对象。

3.2.4阻止浏览器的默认行为：

​ 只能用preventDefault，不能在事件函数里使用return false。
原封不懂得输入到大脑就好啦~简单！

四.组件的内容 ：children

组件的内容，使用 children属性获取

 class Books extends React.Component {
      constructor(props) {
        super();
      }

      render() {
        return (
          <div>
            <p>我是上面的片</p>
            {this.props.children}
            <p>我是下面的片</p>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books>
          <h1>我是组件之间的内容</h1>
        </Books>
      </div>,
      document.getElementById("box")
    );

五.refs

5.1获取DOM

表示对组件真正实例（也就是html标签，也就是DOM对象）的引用，其实就是ReactDOM.render()返回的组件实例；ref可以写在html标签里，也可以写在组件（自定义标签里），和vue的ref是同样的意思。

​ 官方建议： 勿过度使用 Refs（尽量不要操作DOM），在对逻辑进行处理的时候尽量优先考虑state（数据驱动）

5.2用法

1）. 赋值为 字符串(官方不推荐使用)

  class Books extends React.Component {
      constructor(props) {
        super();
      }
      fn01 = () => {
        this.refs.username.value = "hhh";
      };
      render() {
        return (
          <div>
             {/*赋值为字符串*/}
            <input type="text"  ref="username" />
            <input type="button" value="测试01" onClick={this.fn01} /><br/>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books></Books>
      </div>,
      document.getElementById("box")
    );

2）. 赋值为 回调函数

​ 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。

​ ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

//ref的值赋成回调函数时，回调的参数就是当前dom元素。
// callback refs 回调
<jsx ref={el => this.定义一个实例属性 = el} //el就是dom对象
this.定义一个实例属性 //后期用作访问jsx元素
//当组件挂载时，将 DOM el元素传递给 ref 的回调
//当组件卸载时，则会传递 null。
//ref 回调会在 componentDidMount 和 componentDidUpdate 生命周期之前调用
如：
<input type=“text” ref={(currDom) => this.input1 = currDom} />
<input type=“text” ref={(currDom) => this.input2 = currDom} />

 class Books extends React.Component {
      constructor(props) {
        super();
        this.ipt=null;
      }
      fn02=()=>{
        this.ipt.value = "啦啦啦";
    }
      render() {
        return (
          <div>
            <input type="text" ref={el=>this.ipt=el}/>
            <input type="button" value="测试02" onClick={this.fn02}/>
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books></Books>
      </div>,
      document.getElementById("box")
    );

3）. React.createRef() （React16.3提供）

​ 使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例。

//1、在构造函数里
// 实例化
this.firstRef = React.createRef() //发生在构造器
//2、挂载在ref属性上
//3、获取dom原始
this.firstRef.current //current是官方的属性

 class Books extends React.Component {
      constructor(props) {
        super();
        this.firstRef = React.createRef(); //发生在构造器
      }
      fn03=()=>{
        console.log(this.firstRef.current);
    }
      render() {
        return (
          <div>
            {/*  React.createRef() （React16.3提供） */}
            <input type="text" ref={this.firstRef} />
            <input type="button" value="测试03" onClick={this.fn03} />
          </div>
        );
      }
    }
    ReactDOM.render(
      <div>
        <Books></Books>
      </div>,
      document.getElementById("box")
    );