• 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
02-13 20:28