React入门

一、环境

• HTML（即模板引擎的时候）可以使用cdn

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

• 前端项目构建

#淘宝镜像
$ npm config set registry https://registry.npm.taobao.org

# my-app即项目名
$ npm install -g create-react-app
$ reate-react-app my-app
$ cd my-app/
$ npm start

HelloWorld

<div id="example"></div>
  <div id="cs"></div>
  <script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
      ReactDOM.render(
        <h1>测试</h1>,
        document.getElementById('cs')
      );
    </script>

事件

class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.state = {name:'Hello world!'};
          // React.createRef()类似Vue的this.$refs.xxx
          this.myTextInput = React.createRef();
          // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
          // this.handleClick = this.handleClick.bind(this)
        }
        // 直接写就得绑定
        // handleClick() {
        //   this.myTextInput.current.focus();
        // }

        // 这个语法确保了 `this` 绑定在  handleClick 中
        handleClick = () => {
          console.log('this is:', this);
          this.myTextInput.current.focus();
        }
        preventPop(name, e){    //事件对象e要放在最后
            e.preventDefault();
            alert(name);
        }
        render() {
          /**
           * 事件驼峰onClick
           */
          return (
            <div>
              <input type="text" ref={this.myTextInput} />
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
              {/* 通过 bind() 方法传递参数。 */}
              <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
          );
        }
      }

      ReactDOM.render(
        <MyComponent />,
        document.getElementById('example')
      );

列表&Keys（循环）

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
  // 循环不分配key，会出现警告 a key should be provided for list items（意思就是需要包含 key）
  // key应该在数组的上下文中被指定
  // （同列表中）唯一性
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
 
 // 传递的参数
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

组件 API

• 设置状态：setState(nextState, callback)

合并nextState和当前state，并重新渲染组件。

• setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
• 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
• setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

• 替换状态：replaceState(nextState, callback)

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

• 设置属性：setProps(nextState, callback)

更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

• 替换属性：replaceProps(nextState, callback)

replaceProps()方法与setProps类似，但它会删除原有 props。

• 强制更新：forceUpdate(callback)
• 获取DOM节点：findDOMNode()
• 判断组件挂载状态：isMounted()

isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

组件生命周期

组件的生命周期可分成三个状态：

• Mounting(挂载)：已插入真实 DOM

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序:

• constructor(): 在 React 组件挂载之前，会调用它的构造函数。
• getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
• render(): render() 方法是 class 组件中唯一必须实现的方法。
• componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

• Updating(更新)：正在被重新渲染

每当组件的 state 或 props 发生变化时，组件就会更新。

• getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
• shouldComponentUpdate():当 props 或 state 发生变化时，
  shouldComponentUpdate() 会在渲染执行之前被调用。
• render(): render() 方法是 class 组件中唯一必须实现的方法。
• getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
• componentDidUpdate(): 在更新后会被立即调用。

• Unmounting(卸载)：已移出真实 DOM

• componentWillUnmount(): 在组件卸载及销毁之前直接调用。