关于react的学习笔记(1)

React 是一个用于构建用户界面的 js库。

优点:1.声明式设计 2.高效 3.JSX 4.组件化 5.单向响应的数据流 6.能跟已有的框架配合

元素是构建React的最小单位，用于在屏幕是输出内容

const element = <h1>Hello, world!</h1>; 

这是react内部定义的一种语法，JSX。他在编译为JS代码后执行速度更快。
还有就是，能在编译过程中就发现错误。
有一点需要注意的是class和for用className 和 htmlFor来代替。

ReactDOM.render(template,targetDOM)
这是React的最基本方法，用于将模板转为H5,并插入指定的DOM节点。该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如

；第二个参数是插入该模板的目标位置。

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

JSX

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
解析规则:遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

样式引入

1.引入css文件
在css文件中写样式。
2.可以以变量声明的方式,把样式赋给style属性

 <div id="container"></div>
    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
    let inputStyle = {
      "backgroundColor":"yellow",
      "color":"red"
    };
      ReactDOM.render(
        <div>
          <input type="text" style={inputStyle} value={value}/> 
          <button>{buttonName}</button>
        </div>,
        document.getElementById("container")
      )
    </script>

3.行内样式
将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/> 

组件的三种声明方式及优缺点

1.无状态函数组件
为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作,表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 箭头 function的形式在创建. https://www.jianshu.com/p/63569386befc

    import React from 'react';
function HelloComponent(props /* context */) {
  return <div>Hello {props.name} 完成无状态函数组件声明 以及props传值 狗头</div>;
}
export default HelloComponent;

优点:代码的可读性更好，并且减少了大量冗余的代码,组件不会被实例化,在大型项目中能以简单的写法来分割原本庞大的组件。
缺点:组件不能访问this对象 组件无法访问生命周期的方法
2.React.createClass
这是ES5的原生的JavaScript来实现的React组件。

import React,{Component} from 'react';
var InputControlES5 = React.createClass({
  //这个方法的话，需注意你的版本号，太高不支持，另外官方比较推荐ES6的class声明
  //所以还是用class吧，这个当拓展吧
 
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
export default InputControlES5;

3.React.Component
是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式

import React,{Component} from 'react';
class InputControlES6 extends React.Component {
    render() {
        return (
            <div>
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
export default InputControlES6;

react创建组件的三种方式
然后去app.js去引入和挂载，最后会在index.js和index.html中显示。