React学习记录！！！

1：hello_react

  <div id="text"></div>
  
  <script type="text/babel">
    // 创建一个虚拟dom
    const Vdom = <h1>Hello React</h1>
    // 渲染虚拟DOM到页面
    ReactDOM.render(Vdom, document.getElementById('text'))
  </script>

2：jsx的语法规则

   * 1.定义虚拟dom时，不要使用引号
   * 2.标签中混入JS表达式要用{}
   * 3.样式的类名指定不要用class，要用className
   * 4.内敛样式，要用style={{key:value}}
   * 5.必须只有一个根标签
   * 6.标签必须闭合
   * 7.标签首字母
   *  (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
   *  (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

3：遍历数组渲染到界面

const arr = ["vue", "react", "angular"];
const myText = (
    <div>
      <h1>{title}</h1>
      <ul>
        {
          arr.map((item, index) =>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  );
  ReactDOM.render(myText, document.getElementById("text"));

4：react中定义组件

1. 类式组件

class HelloMesage extends React.Component {
   render(){
     console.log(this);
     return <h1>123</h1>
   }
 }

 ReactDOM.render(<HelloMesage />, document.getElementById('text'))

2. 函数式组件

// 创建函数
function Demo() {
   return <h1>This is a demo</h1>;
 }
 // 2.渲染组件到页面
 ReactDOM.render(<Demo />, document.querySelector("#text"));

5：组件实例三大属性

1. state

  class Weater extends React.Component {
    state = { isHot: false, text: "这是一个测试文字" };
    render() {
      const text = this.state.isHot ? "炎热" : "下雨";
      return <h1 onClick={this.demo}>今天天气怎么样：{text}</h1>;
    }
    demo = () => {
      console.log(this, "123");
      this.setState({ isHot: !this.state.isHot });
    };
  }

  ReactDOM.render(<Weater />, document.getElementById("text"));

2. props

• 基本使用

 class Person extends React.Component {
    render() {
      const { name } = this.props;
      return (
        <ul>
          <li>姓名：{name}</li>
        </ul>
      );
    }
  }
  ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
  ReactDOM.render(<Person name={1} />, document.getElementById("text2"));

• 函数式组件的使用

function Person(props) {
   return (
     <ul>
       <li>姓名：{props.name}</li>
     </ul>
   );
 }

 ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
 ReactDOM.render(<Person />, document.getElementById("text2"));

• 简写方式

 class Person extends React.Component {
   constructor(props) {
     // 构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props
     super(props);
   }
   render() {
     const { name } = this.props;
     return (
       <ul>
         <li>姓名：{name}</li>
       </ul>
     );
   }
 }

 ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
 ReactDOM.render(<Person name="123" />, document.getElementById("text2"));

3. ref

• 普通的用法（ this.refs.xxx）

class Demo extends React.Component {
  render() {
    return (
      <div>
        <input ref="input1" type="text" placeholder="点击触发" />
        <button onClick={this.submit}>点击</button>
      </div>
    );
  }
  submit = () => {
    // ref属性来标识自己
    const val = this.refs.input1.value;
    alert(val);
  };
}
// 渲染虚拟DOM到页面
ReactDOM.render(<Demo />, document.getElementById("text"));

• 回调形式的ref

class Demo extends React.Component {
  render() {
    return (
      <div>
        <input ref={this.saveInput}
          type="text"
          placeholder="点击触发"
        />
        <button onClick={this.submit}>点击</button>
      </div>
    );
  }
  saveInput = (e) =>{
	this.input1 = e
  }
  submit = () => {
    // ref属性来标识自己
    const val = this.input1.value;
    alert(val);
  };
}
// 渲染虚拟DOM到页面
ReactDOM.render(<Demo />, document.getElementById("text"));

• 使用createRef

class Demo extends React.Component {
  // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是专人专用的
  myRef = React.createRef()
  render() {
    return (
      <div>
        <input
          ref={this.myRef}
          type="text"
          placeholder="点击触发"
        />
        <button onClick={this.submit}>点击</button>
      </div>
    );
  }
  submit = () => {
    console.log(this.myRef.current.value, 'myRef');
  };
}
// 渲染虚拟DOM到页面
ReactDOM.render(<Demo />, document.getElementById("text"));

5.react中的事件处理

（1)。通过onXxx属性指定事件处理函数（注意大小写）
        a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件 ----为了兼容性
        b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）----为了高效
 (2)。通过event。target得到发生事件的DOM元素对象 ----不要过渡使用ref