React学习

1、概述

react由Facebook开源，用于构建用户UI界面的javascript库，注重MVC框架中的View.
react开发思想核心：组件（componet)，实现功能拆分、组件封装、单独维护

2、基础知识

• 2个javazscript包：

react.js React的核心顶层库库，其核心思想是虚拟DOM

react-dom.js 基于react.js,提供针对DOM操作的API

React推荐使用JSX语法，但JSX语法无法被浏览器内置JavaScript引擎解析，需要使用Babel进行预编译，如有使用JSX语法则需加上<script type="text/babel">(生产环境下为减少浏览器负担，提高用户体验，同时会将JSX预编译为JS代码)

• 官方脚手架creat-react-app

  npm i create-react-app -g //全局安装脚手架
  creat-react-app project-name //创建名为project-name的项目
  

  项目结构：

  * node_modules:项目依赖
  * package.json:项目描述文件
  * public：manifest.json指定开始页面为index.html
  * scr:项目的源代码
  

  npm start 命令启动项目，会启动一个本地项目，默认占用3000端口

3、元素渲染

• React元素是构成React应用的而最小基本单元，以JavaScript对象为表现形式，用来描述虚拟DOM结构。

const element = <div>第一个 React 元素</div>
console.log( element );//可通过F12开发控制台进一步认识React元素

• 将React元素渲染成DOM
  使用react-dom.js 所提供的顶层 API ReactDOM.render()

ReactDOM.render(element, container [, callback])  
//在指定的 DOM 节点（container）里渲染一个 React 元素（element）
//ReactDOM.render() 方法不会修改 container 容器节点，只会修改容器的子节点；
//首次调用时，容器节点里的所用 DOM 元素都会被替换；后续调用时，会使用 React 的 DOM 差分算法进行高效的视图更新；

• 渲染示例

<div id="container"></div>
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('container'));
//React元素是不可变对象，如要实现动态UI，需要定时更新传入的React元素，用户界面会在必要的地方更新DOM

4、React JSX

ReactDOM.render(
    <div>//多个html标签需要使用<div>包裹
    <h1>W3Cschool教程</h1>
    <h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        //自定义属性需要使用data-前缀
    </div>,
    document.getElementById('example')
);
// React JSX 代码代码可保存为为独立文件XXX.js，然后再html中引用。

ReactDOM.render(
    <div>
        <h1 style= {myStyle}>{i = 1 ? 'True!' : 'False'}</h1>
        {/*  JSX中使用JS表达式需要使用{}
             JSX 中不能使用 if else 语句，使用三元运算 表达式来替代
             推荐使用内联样式，注释需要写在{中}
        */}
    </div>,
    document.getElementById('example')
);

5、React组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <HelloMessage name="W3CSchool" />,
  document.getElementById('example')
);
//React.createClass 方法用于生成一个组件类 HelloMessage。
//<HelloMessage /> 实例组件类并输出信息
//原生 [HTML 元素]名以小写字母开头，而自定义的 React 类名以大写字母开头

在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

6、React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

class LikeButton extends React.Component{
  constructor(props){
    super(props);
    this.state={liked:false};
    this.handleClick=this.handleClick.bind(this)
  }
  handleClick(event){
    this.setState({liked:!this.state.liked});
  }
  render(){
    var text = this.state.liked? '喜欢':'不喜欢';
    return(
      <div>
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。
      </p></div>
    );
  }
};
ReactDOM.render(
  <LikeButton />,
  document.getElementById('root')
);

7、React Props(状态)

Props用法与State类似，区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。

8、组件API

• setState: 设置状态，新状态会和当前的state合并
• replaceState：替换状态,该状态会替换当前的state
• setProps: 设置属性
• replaceProps: 替换属性
• forceUpdate: 强制更新
• findDOMNode: 获取DOM节点,常用于获取表单字段的值和做一些 DOM 操作。
• isMounted: 判断组件挂载状态,表示组件是否已挂载到DOM中