React笔记（核心概念部分）

核心概念

1. JSX

• JSX是javascript的语法扩展，在JSX中能够在大括号{}内放置任何有效的javascript表达式。
• JSX也是一个表达式，能够在if和for循环代码块中使用JSX。
• 经过引号将属性值指定为字符串字面量，使用大括号将属性值指定为j s表达式
• React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如在JSX中class变为className

const name = 'Jade';
  const element = <div>
    <h1 className='weclome'>Hello, {name}</h1>
    <input type='text' defaultValue={name} />
  </div>;

  ReactDOM.render(
     element,
     document.getElementById('root')
  );

2. props

• 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性以及子组件转换为单个对象传递给组件，这个对象被称之为 “props”。
• 组件不管是使用函数声明仍是class声明，都不能修改自身的 props，props为只读。

3. State

• state是组件私有化，且彻底受控于当前组件，简单说，彻底props，state在组件内能够随意修改。定义state应该在class构造函数constructor中，state能够传递给子组件，数据是向下流动。

• 关于修改state，应该使用setState()，而不是直接赋值。

  • this.setState({name: 'Jade'}); //correct

  • this.state.name = 'jade'; // wrong

  • setState()为异步，多个setState()会合并为一个调用。因此最好不要依赖它们的值来更新下一个状态。

  • 关于异步的问题，可让setState()接受一个函数来解决，该函数接受两个参数，用上一个 state 做为第一个参数，将这次更新被应用时的 props 作为第二个参数。

4. 事件处理

• 不能经过return false;阻止默认行为，只能是e.preventDefault()。

• JSX中回调问题，事件回调必须绑定this，否则回调中this为undefined。缘由在于js函数工做原理：

  const obj = {  
   name: 'Jade',  
   say: function () {  
   console.log(this);  
   }  
  };  
  
  const test = obj.say;  
  ​  
  obj.say(); // {name: "Jade", say: ƒ}  
  test(); // undefined

  在js中，传递一个函数名给一个变量，而后在变量后加上（）调用这个方法，此时方法内部的this的指向就丢失。在React中，OnClick其实就是一个中间变量，因此this会丢失。

• 关于事件回调中this丢失的解决办法有如下：

  • 使用bind绑定this，<a onClick={this.click.bind(this)}>点击</a>。

  • 使用箭头函数定义事件回调 this.click = () => { //do something }

  • 使用箭头函数调用事件回调<a onClick={() => this.click()}>点击</a>

  • 事件传递参数的方法有两种，分别是经过箭头函数和bind，事件对象e会被视为第二个参数，不一样的是，箭头函数的方式必须显式的传入e，bind则不须要，以下：

    *   `<a onClick={(e) => this.click(id, e)}>点击</a>`
        
    *   `<a onClick={this.click.bind(this, id)}>点击</a>`

5. 表单

• 受控组件：表单中存在一个input，其value值必须是咱们设置在constructor构造函数中的state的值，经过onChange事件改变state中的值，最终造成一个循环的回路影响。
• 非受控组件：非受控也就意味着我能够不须要设置它的state属性，而经过ref来操做真实的DOM。

6. 组件之间通信

• 父子通信:

// Context 可让咱们无须明确地传遍每个组件，就能将值深刻传递进组件树。
// 使用场景： 嵌套多层的组件，且每层组件可能都会用到某个变量
// 缺点：致使组件的复用性下降
const NameContext = React.createContext('Jade'); // 默认值‘Jade’
class App extends React.Component {
  render() {
    return (
      // 使用Provider，将变量传递给下面的全部组件
        <NameContext.provider value='Jadeee'>
          <PageHeader />
      </NameContext>
    )
  }
}

class PageHeader extends React.Component {
  render() {
    // 中组件不用在手动传递了
    return <UserName />
  }
}
  
class UserName extends React.Component {
  
  static contentType = NameContext;
  render() {
    return <p> {this.context} </P>
  }
}

// 父子通信主要经过props传递参数，数据自上而下流动，实现父子通信
class ChildrenComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
              {/* 接受从父组件传递而来的title */}
            <h1> {this.props.title} </h1>
        )
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
          this.state = {
          title: '标题'
        }
    }

    render() {
        return (
              {/* 将this.state.title传递给子组件 */}
             <ChildrenComponent title={this.state.title} />
        )
    }
}

• 子父通信:

class ChildrenComponent extends React.Component {
    constructor(props) {
        super(props);
          this.state = {
          name: 'children component'
        }
    }

    clickBtn() {
          // 调用父组件方法并将参数传递给父组件
        this.props.onClickChildren(this.state.name);
    }

    render() {
        return (
            <button type="button" onClick={this.clickBtn.bind(this)}>
                  Click Me!
            </button>
        )
    }
}

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

      // 子组件调用，val参数为子组件传递过来
    onClickChildren(val) {
        console.log(val); // children component
    }

    render() {
        return (
            <div>
                      {/* 将onClickChildren()方法做为props传递给子组件 */}
                 <ChildrenComponent 
                          onClickChildren={this.onClickChildren.bind(this)} />
            </div>
        )
    }
}

• 子子通信：

  • eventBus
  • Redux