React基础部分

react基础部分，也需要我们有深度地去掌握它。
我和其他博主一样，建议先用方便初学者引用的js包，我也是初学者，以前就是这么干的。websotrm以及vscode工具都可以，三个包分别是 react.js(核心库)、react-dom.js（提供与dom相关的服务）、brower.js（将jsx语法转化为js语法）

一、React基础

1、ReactDOM.render()

它是react的最基本方法，用于将模板转化为html语言，并插入指定的DOM节点

ReactDOM.render(
    <h1> Hello,world <h1>,
   document.getElementById('example')
);

上面将一个h1标题，插入example节点

2、样式设置

style
ReactDOM.render(
   <div style={{color:'red'}}>
     XXXX
   </div>,
   document.body
);
类名（className）
ReactDOM.render(
   <div className="box">content</div>,
  document.body
);

如果你采用ant-design的话，也可以安装 styled-components包来修饰原本的组件

3、事件绑定

function say(){
      alert("How old are you?")
}
React.render(
     <button onClick={say}>
     document.body
);

相较于之前的html呢，它就是采用了“{function()}”这种形式。还有就是，事件绑定的时候，事件为驼峰式写法。

4、组件

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

var Hello = React.createClass({
     render：function（）{            // 写法不止这一种，按照喜好来就可以啦
          return  <h1>hello world</h1>；
     }                                             
});
ReactDOM.render(
     <Hello />，  
     // 比较有意思一点，这里的符号是不可以省略的           
     document.getElementById('app')     
);

比较建议的一种方法，vscode中安装es语法包提示，之后rcc快捷键。

4.1 组件props

只是作为属性传递，是不可变的；
this.props 对象的属性与组件的属性一一对应。

var Hello = React.createClass({
    render:function(){
         return <h1>Hello {this.props.name}</h1> 
    }
});
ReactDOM.render(
   <Hello name="veblen"/>
   document.getElementById('app') 
);

this.props.children属性，它表示组件的所有子节点

var NodeList = React.createClass({
     render: function(){
            return (
                 <ol>
                 {
                      this.props.children.map( function(child){
                             return <li>{child}</li>
                      })
                 }
                 </ol>  
      ); 
    }
});
ReactDOM.render(
     <NodeList>
         <span>hello</span>
         <span>world</span>
     </NodeList>
     document.body
);

this.props.children 的值有三种可能：
1、如果当前组件没有子节点，它就是undefined
2、如果有一个子节点，数据类型是object
3、如果有多个子节点，数据类型是array
React提供一个工具方法 React.Children来处理 this.props.children
React.Children.map来遍历子节点而不用担心子节点的数据类型

React.Children.map(this.props.children,function(child){
     return  <li>{child}</li>
})

4.2 组件 PropTypes

组件的属性可以接受任意值，字符串、对象、函数等都可以;
有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
PropTypes属性，就是用来验证组件实例的属性是否符合要求。

var MyTitle = React.createClass({
      propTypes:{
          title: React.PropTypes.string.isRequired,
      },
      render:function(){
          return <h1>{this.props.title}</h1>;
     }  
});

该组件中，我们创建了一个title属性。PropTypes告诉React，这个title属性是必须的，而且它的值必须是字符串。
getDefaultProps 方法可以用来设置组件属性的默认值

ar MyTitle =React.createClass({
     getDefaultProps: function(){
          return {
               title: 'hello world'
          };
     },
     render: function(){
          return <h1>{this.props.title}</h1>;
     }
});
ReactDOM.render(
       <MyTitle />,
       document.body
);

代码输出 hello world

4.3 组件内部事件

var Mybtn=React.createClass ({
     say:function(){
             alert("How old are you!")
     }
     render:fucntion(){
           return (
                  <button onClick={this.say} />
           )
     }
})
// this指向组件实例

this的指向事件你可能需要专门地了解一下，毕竟，这里是片面的

4.4 组件state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开四有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI

var LikeButton = React.createClass({
      getInitiaState:function(){    // 现在语法已经改变了那么多，已经不用那么编写了
                return {liked:true};
      },
      handleClick:function(event){
             this.setState(liked: !this.state.liked);
      },
      render:function(){
             var text = this.state.liked? 'love':'hate';
             return(
                  <p onClick={this.handleClick}>
                         I{text}veblen
                  </p>   
             );
      }
});
ReactDOM.render(
    <LikeButton / >,                                 
   document.getElementById('app')
);

解读，LikeButton组件，它的getInitiaState方法用于定义初始化状态，也就是一个对象，这个对象可以通过 this.state属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。
this.props 和 this.state 都用于描述组件的特性，可能会产生混淆，区分方法：
this.props 表示那些一旦定义，就不再改变的特性；
this.state是会随着用户互动而产生变化的特性。

4.5 组件数据的双向绑定

var Input = React.createClass({
     getInitialState:function(){
            return {value: 'Hello!'}; 
     },
     handleChange: function(event){
           this.setState({value:event.target.value}); 
    },
    render: function(){
         var value = this.state.value;
        return (
           <div>
                 <input type='text' value={value} onChange={this.handleChange} />
                 <p>{value}</p>
           </div>     
        ); 
    }
});

ReactDOM.render(<Input / >,document.body);

// 这个地方需要补充说明一下，毕竟是一个不错的知识点

4.6 组件生命周期

componentWillMount() — 挂载前
componentDidMount() — 挂载后
componentWillUpdate(object nextProps,object nextState) — 更新前
componentDidUpdate(object prevProps,object prevState) — 更新后
componentWillUnmount（） ---- 销毁前

5. 操作真实DOM

组件并不是真实的dom节点，而是存在于内存中的一种数据结构，叫做虚拟dom。只有当它插入文档以后，才会变成真实的dom。根据react的设计，所有的dom变动，都先发生在虚拟dom上，然后再按实际发生变动的部分，反映在真实dom上。这种算法叫做dom diff，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实dom的节点，这时就要用到 ref 属性

var MyComponent = React.createClass({
    handleClick: function(){
        this.refs.myTextInput.focus();      
    },
    render:function(){
        return(
            <div>
                 <input type = "text" ref="myTextInput" />
                 <input type = "button" value= "focus the text input" onClick={handleClick}                 
            </div>  
        );
    }
});
ReactDOM.render(
       <MyComponent />,
       document.getElementById('app') 
);

上面代码中，组件myComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的dom节点，虚拟dom是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref 属性，然后，this.refs.[refName]就会这个真实的dom节点。
需要注意的是，由于 this.ref.[refName]属性获取的是真实dom，所以必须等到虚拟dom插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实dom发生 Click 事件之后，才会读取

其实，这篇博客的主要内容来自简书上的一位博主，正好我也想了解补充这部分内容，按照他的内容手敲了一遍，长个印象。他还有不错的关于 jsx、redux、组件间通信部分的介绍。node.js部分也可以好好看一下
原文链接：https://www.jianshu.com/p/c509cec33594

纸上得来终觉浅，觉知此事要躬行。
后面的话，我会自己去实践这些内容，以及其他内容。加油！