Notes On React - One

安装

  React依赖于react、react-dom这两个包。生成React项目可以通过包管理工具(如npm)导入react、react-dom包来创建[1]；也可以通过官方提供的创建方式 create-react-app：npm install -g create-react-app create-react-app my-app 或 npx create-react-app my-app(npm 5.2.0+) 来创建[2]。如果只是在现成的项目中引用React而不需要使用前端打包工具来打包，也可以通过CDN来引入React[3]。
  [1]: https://doc.react-china.org/docs/add-react-to-an-existing-app.html
  [2]: https://doc.react-china.org/docs/add-react-to-a-new-app.html
  [3]: https://doc.react-china.org/docs/cdn-links.html
  

组件与模块

  组件为页面中一个的区域，其包含了该组件实现所需要的全部资源。页面中每个组件相互独立，可以重复使用，自由组合。
  模块化为将某功能分离出来进行实现。前端组件可以由实现功能的模块(如 JavaScript 模块-实现组件的行为功能等；CSS 模块-实现组件的样式功能等...)和所需的媒体资源构成。
  为了使每个模块有独立的作用域和方便代码的复用，可以将实现功能的代码封装成函数并独立到一个单独的文件中，再通过 module.exports 将该模块的接口暴露出来，使其他模块可以通过 require 来使用这个该功能。
  React 基于组件来管理资源。
  

JSX

  JSX 为 JavaScript 的一种语法扩展，它类似于模板语言(但完全在 JavaScript 内部实现)。React 推荐 JSX 来描述用户界面(组件的UI部分)[4]。
  因为 if 和 for 在 JavaScript 中不是表达式，因此不能将 if 和 for 置于 JSX 中，而应放置在外部以控制渲染。
  [4]: https://doc.react-china.org/docs/introducing-jsx.html
  

组件渲染

  在 React 中可以用 JavaScript函数 来定义一个组件也可以用 类(ES6 class) 来定义一个组件(组件名必须以大写字母开头)。
   React 通过 ReactDOM.render() 方法渲染组件；React组件 可以嵌套其他 React组件 ，但其返回值只能有一个根元素(必要时用 <div> 等标签进行包裹)[5]。
  [5]: https://doc.react-china.org/docs/components-and-props.html
  

Props

  props 是向 React 组件中传递的只读的值(常量)。

class Student extends React.Component {
    static defaultProps = {
        stuName: 'Marke',
        stuAge: '22'
    };
    render() {
        return (
            <div>
                <h3> Name: {this.props.stuName} </h3>
                <h3> Age: {this.props.stuAge} </h3>
            </div>
        );
    }
}

ReactDOM.render(
    <Student
        stuName={'John'}
        stuAge={'23'} 
    />,
    document.getElementById('root')
);

  在组件内部使用 this.props 对象来获取传递过来的常量；也可以对 Props 设置默认值--通过一个 static 类型的对象 defaultProps 来设置默认的 值；即无传递对应参数时使用默认的值。
  

State

  State 为 React组件 内部的一个可变的私有属性。可以通过改变组件的 State 来实现组件UI的重新渲染。

class StateDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {num: 0};
    }

    render() {
        return (
            <div>
                <h2>The stateNum is {this.state.num}</h2>
                <button onClick={() => this.setState(prevState => ({num: prevState.num + 1}))}>ADD ONE</button>
            </div>
        );
    }
}

  该组件实现在按钮点击之后其显示的数值加一。组件通过 <button> 的 onClick 事件来使用 setState 进行 state 的更新，使得组件进行重新的渲染。并且 State 只适用于定义于类的组件。