• React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。
• 以声明式编写UI，可以让你的代码更加可靠，且方便调试。
• 创建好拥有各自状态的组件，再由组件构成更加复杂的界面。
• 无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。
• 无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。
• React 也可以用作开发原生应用的框架 React Native。

react库

1. react.js—— React的核心库
2. react-dom.js——提供与DOM相关的功能
3. Browser.js——将JSX语法转为JavaScript语法 注：
   • 上面3个库放在页面顶部，首先加载
   • 此外标签的type属性为text/babel(JSX 语法，跟JavaScript不兼容,通过Browser.js解析);
   • 实际上线 babel先build（解析jsx比较耗时）

JSX语法

• HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
• ReactDOM.render() 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点；render()方法只有一个根标签，否则会报错

    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('container')
    );

• JSX 的基本语法规则:遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

    let arr=[
        <b>item1</b>,
        <b>item2</b>,
        <b>item3</b>
    ];
    
    ReactDOM.render(
        <div>
            {
                arr.map(item => <h1>this is {item}</h1>)
            }
        </div>,
        document.getElementById('container')
    );

react组件

• React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    let ComponentA = React.createClass({
        render(){
            return (<h1>this is {this.props.name}</h1>)
        }
    });

    ReactDOM.render(
        <ComponentA name="componentA"/>,
        document.getElementById('container')
    );

注：

1. 组件名首字母必须大写，否则报错
2. 组件必须有render()方法，用于输出组件
3. render()方法唯一根标签，否则报错
4. 组件标签用法与HTML标签用法相同，name="componentA"表示组件加入一个值为componentA的属性，组件的属性可以在组件类的 this.props 对象上获取
5. 组件的添加javaScript 保留字为属性名时，写法会有区别：如class->className
6. this.props.children特殊属性
   • this.props.children表示组件的所有子节点，类型可能为undefined、object、array（子节点个数），
   • React.Children.map(children, function[(thisArg)])可以用来遍历所有子节点而不需考虑节点个数，
   • React.Children.forEach(children, function[(thisArg)])类似但是不返回一个数组

    let ComponentA = React.createClass({
        render() {
            return (
                <ul>
                {
                    React.Children.map(this.props.children,item => <li>{item}</li>)
                }
                </ul>
            );
        }
    });
    
    ReactDOM.render(
      <ComponentA>
        <i>item1</i>
        <i>item2</i>
        <i>item3</i>
      </ComponentA>,
      document.getElementById('container')
    );

1. PropTypes和getDefaultProps
   • PropTypes：就是用来验证组件实例的属性是否符合要求
   • getDefaultProps： 方法可以用来设置组件属性的默认值 ``` html let ComponentA = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, }, getDefaultProps() { return { title : ‘Hello World’ }; }, render() { return ( <h1>{this.props.title},{this.props.name}</h1> ); } });

   let a=’moning’; ReactDOM.render( <ComponentA name={a}/>, document.getElementById(‘container’) ); ```

虚拟DOM

• 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有 大专栏  react学习笔记的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
• 但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
• 需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。通过为组件指定事件的回调函数，确保了只有等到真实 DOM 发生事件之后，才会读取 this.refs.[refName] 属性。
• React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等

this.state

• 组件与用户交互，组件充当一个状态机，一开始有个初始状态，然后用户交互，改变状态，从而触发UI重新渲染。

    let ComponentA = React.createClass({
        getInitialState() {
          return {liked: false};
        },
        handleClick(event) {
          this.setState({liked: !this.state.liked});
        },
        render() {
          var text = this.state.liked ? 'ON' : 'OFF';
          return (
            <p onClick={this.handleClick}>
              {text} . Click to toggle.
            </p>
          );
        }
    });
       
     
    ReactDOM.render(
      <ComponentA/>,
      document.getElementById('container')
    );
  

• 由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

表单输入框

• 文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

    let ComponentA = React.createClass({
        getInitialState() {
          return {value: 'Hello!'};
        },
        handleChange(event) {
          this.setState({value: event.target.value});
        },
        render() {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
    });
     
   
    ReactDOM.render(
      <ComponentA/>,
      document.getElementById('container')
    );

组件的生命周期

• 组件的生命周期分成三个状态：
  1. Mounting：已插入真实 DOM
  2. Updating：正在被重新渲染
  3. Unmounting：已移出真实 DOM
• React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
  1. componentWillMount()
  2. componentDidMount()
  3. componentWillUpdate(object nextProps, object nextState)
  4. componentDidUpdate(object prevProps, object prevState)
  5. componentWillUnmount()
• 此外，React 还提供两种特殊状态的处理函数。
  1. componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  2. shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

    let ComponentA = React.createClass({
        getInitialState() {
          return {
            opacity: 1.0
          };
        },
      
        componentDidMount() {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this), 100);
        },
      
        render() {
          return (
            <div style=>
              Hello world
            </div>
          );
        }
    });
     
   
    ReactDOM.render(
      <ComponentA/>,
      document.getElementById('container')
    );

组件的数据来源

• 通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

原文地址：https://www.cnblogs.com/sanxiandoupi/p/11692271.html