React

简介

1. 前段UI的开发框架
2. 前置内容
   • Sass,Comonpas
   • Yeoman,Grunt,Webpack
   • CommonJS,NodeJS
3. 学习地址

hello world

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
    //这里的节点不是dom节点
    //这里的{ }指的是要取js的表达式的值
  }
});

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

JSX和Style

JSX

• 语法糖
• 类似TypeScript,CoffeeScript
• 可以在js中直接写
• 在hello world中些的所有的标签都是react components,包括div标签,这些div标签代表的都不是dom节点,而是react components实例.
• this指的是components的实例
• 用{ }来执行js的表达式.
• props指的是component在使用的时候属性的集合

style

• 使用class

    
return <div className='alert-text'></div>

• 内联样式

    
//在jsx中style需要用样式对象表示.在jsx中js的表达式需要用{}
//样式key使用的驼峰写法.
var style = {color:'red'}
return <div style={style}></div>

React-Components-Lifecycle

• Mounted:

  React Components在render解析,生成对应的DOM节点,并被插入到浏览器DOM结构的过程

• Update:

  一个moounted的React Components重新render的过程. DOM不一定会改变,只有react在比较了dom之后.

• Unmounted

  控件从对应的DOM节点移除.

• hook

  react对状态都封装了对应的hook函数.

  

hook

Mounting

• componentWillMount
• componentDidMount
• getInitialState()
  • 用来初始化state

Updating

• componentWillReceiveProps
  • 组件接收到新的prop时候调用,函数参数就是新的prop,可以和this.prop进行比较.
• shouldComponentUpdate
  • 函数有两个参数,props和state,可以根据需要通过返回true/false来决定是否要继续.

props和state

• props往往是组件的调用方在调用组件的时候指定的,指定了一般情况下修改.属于调用方.
• state是属于组件自己的.会根据条件修改的.
• 修改state,调用组件对象的setState({});state的修改会导致组件进入updating状态.导致重新render

react事件绑定

• 通过on+事件名称驼峰法,为组件添加事件.
• 函数的参数是event对象,是jsevent的封装,具有原生的特性.
• 可以通过tip属性对组件添加名称,用于在程序中查找.
• 可以通过React.findDOMNode,拿到dom

var Hello  = React.createClass({
    handleClick:function(event){
        var tip = this.refs.tip//拿到的是react组件
        var tipEl = React.findDOMNode(this.refs.tip);//拿到真实的dom
        event.stopPropagation();
        event.preventDefault();
    },
    render:function(){
        return (
            <div>
                <button onClick={this.handleClick}>
                <span ref='tip'>
                </button>
            </div>
        );
    }
});

var Hello = React.createClass({
    handleClick:function(event){
        this.setState({
            inputContent:event.target.value
        });
        event.stopPropagation();
        event.preventDefault();
    },
    render:function(){
        return (
                <div>
                    <input type='text' onChange={this.handleChange}/>
                    <span>{this.state.inputContent}</span>
                </div>
    }
});

基础知识

• render

  • render函数中只能有一个组件,所以多个组件需要用div等作为容器

  React.render(<div><Test1></Test1><Test2></Test2></div>
  ,document.getElementById('container'));

  • 同样,在用React.createClass({});中的render函数,在return的时候也需要用div等作为容器.否则就是返回了多个组件.

  var Hello = React.createClass({
      render:function(){
          return (
              <div>
  
              </div>
          );
      }
  });