React基础笔记（一）

为什么开始学习React呢？

主要是我感觉Vue.js学的差不多了，就想继续拓展一下，然后就开始学习React

demo

https://gitee.com/zyzcos/react-study

博客

https://zyzcos.gitee.io/

React

React的使用：

<!-- 1.创建React渲染的容器 -->
  <div id='like_button_container'></div>
<!-- 2.加载React -->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 3.加载React组件 -->
  <script src='like_button.js'></script>

  const domContainer =document.querySelector('#like_button_container');
  ReactDom.render(e(LikeButton),domContainer); 

核心概念-JSX

如何在网站上直接使用JSX

1. 添加JSX脚本
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2. 添加type="text/babel"属性给需要用到JSX的js文件
   <script type="text/babel" src="./index.js"></script>

嵌入表达

// 1. { }内编写JS表达式
  // 使用变量
  const name ='Fleven';
  const element1 = <h1>Hello,{name}</h1>
  // 使用函数
  const showFullName(user){
    return user.firstName + '' + user.lastName;
  }
  const user = {
    firstName:'F',
    lastName:'leven'
  };
  const element2 = <h1>Hello,{showFullName(user)}</h1>
  // 给元素定义变量值
  const localhost = '127.0.0.1';
  const element3 = <a href={localhost}>Hello World</a>

// 2.多子元素
  const element3 = (
    <div>
      <h1>Hello</h1>
      <h2>Glad to see you here.</h2>
    </div>
  );

核心概念-元素渲染

元素

ReactDOM管理

如何将元素渲染成DOM

  const element = <h1>Hello,world</h1>
  ReactDOM.render(element,document.getElementById('root'));

更新已渲染的元素

组件 and Props

组件定义

1. 使用函数进行定义

  function Welcome(props){
    return <h1>Welcome, {props.name}</h1>
  }

2. 使用ES6中的类class来定义

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

组件的使用及传参

  const element = <Welcome name='fleven'>;
  ReactDOM.render(
    element,
    document.getElementById("root")
  )
  // 渲染后：<h1>Weclome, fleven</h1>

组件复用

function All() {
  return (
    <div>
      <Welcome name="F" />
      <Welcome name="g" />
      <Welcome name="y" />
    </div>
  );
}
ReactDOM.render(
  <All />,
  document.getElementById("root")
)

关于Props问题

State

什么是State

怎样使用State

  class Clock extends React.Component{
    constructor(props){
      // 估计等同于 super.props = props 或者 this.props = props
      super(props); //我记得意思大概为：向父类传参props
      
      // 在组件的内部定义state及其值。
      this.state = { date:new Date() }
    }
    render() {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }

通过生命周期函数进一步了解State

• componentDidMount() 挂载的时候
• componentWillUnmount() 卸载的时候

  class Clock extends React.Component{
    constructor(props){
      // 估计等同于 super.props = props 或者 this.props = props
      super(props); //我记得意思大概为：向父类传参props
      
      // 在组件的内部定义state及其值。
      this.state = { date:new Date()}
    }
    componentDidMount(){
      // 添加用于计时的 计数器timer ；方便后续清除定时器
      // 这里的this指向对象Clock本身
      this.timer = setInterval(
        // 这里的this指向定时函数
        ()=> this.tick(),   // 返回tick()函数
        1000
      )
    }
    componentWillUnmount(){
      clearInterval(this.timer);  // 清理定时计数器
    }
    tick(){
      this.setState({ //更新State
        date:new Date()
      });
    }
    render() {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }

关于State的注意点

1. 需要通过this.setState()对State进行修改。
2. State的修改时浅合并（覆盖更新的attr，不是全部覆盖）
3. State的更新可能时异步的

  class Child extends React.Component{
    constructor(props){
      super(props)
      this.state = { FatherName:this.props.name }
    }
    render(){
      return(
        <div>
          My Father name is:
          { this.state.FatherName }
        </div>
      )
      // 写到这里，突然觉得有点多此一举。哈哈
    }
  }
  cosnt FatherElement = <Father name={this.state.name}>

事件处理

  <button οnclick={ sendDatas }>发送</button>

• DOM中可以通过返回false阻止事件默认
• React中需要显式使用preventDefault

  function sendDates(e){
    e.preventDefault();
    // 逻辑代码..
  }

• React组件在使用class中，需要进行一个**bind**

  class Toggle extends React.Component {
    constructor(props){
      super(props);
      this.state = { isToggleOn:true };

      // 绑定函数，为了回调中使用`this`，解决了this的指向变化后，不能使用函数的问题
      this.hanleClick = this.handleClick.bind(this);
    }

    handleClick(){
      //  上面的绑定，就是为了能够在这里使用this,来获取state-
      this.setState(state => ({
        isToogleOn : !state.isToggleOn
      }));
    }
    render(){
      return(
        <button
          onClick={ this.handleClick }>
          { this.state.isToggleOn ? '开' : '关'}
        </button>
      )
    }
  }

关于事件使用时，this的问题

1. 在调用的时候，使用箭头函数返回值

  return (
    <button onClick={() => this.handleClick()}></button>
  );

2. 在定义的时候，使用箭头函数赋值定义

  handleClick = ()=>{
    // 逻辑代码
  }

关于事件的传参

1. 通过箭头函数传参

  <button onClick={(e) => this.handleClick(id,e)}>show</button>

2. 通过Function.prototype.bind实现

  <button onClick={ this.handleClick.bind(this, id) }>show</button>