初学React(一)

英文官网：https://reactjs.org/

中文官网：https://doc.react-china.org/

React的特点

1、声明式编程

2、组件化编程

3、支持客户端与服务器渲染

4、高效

5、单向数据流

React高效的原因

1、虚拟DOM，不总是直接操作DOM

2、DOM Diff 算法，最小化页面重绘

相关js库

react.js:React的核心库

react-dom.js:提供操作DOM的react扩展库

babel.min.js：解析JSX语法代码转为纯JS语法代码的库

React的基本使用（从Hello world开始）

1.在页面中导入js

<script src="react.development.js"></script>

<script src="react-dom.development.js"></script>

<script src="babel.min.js"></script>

2.进行代码编写

 <div id="root"></div>
 <div id="container"></div>
<script type="text/babel">
            let vDom=<h1>hello world！</h1>   //不加引号
             //渲染虚拟DOM到页面真实DOM容器中
            ReactDOM.render(vDom,document.getElementById('root'))
            let names=['gmx','tom','alice'];
            ReactDOM.render(
                <div>{
                    names.map(function (name) {
                        return <div key={name}>Hello,{name}!</div>
                    })
                }</div>,
                document.getElementById('container')
            ) 
    </script>

注意：HTML语言直接写在JS语言中，不加任何引号，这就是JSX（全称：JavaScript XML）的语法

组件属性；ReactJS是基于组件化的开发，允许将代码封装成组件（component）然后像插入普通HTML标签一样，在网页中插入这个组件，React.createClass方法可以用于生成一个组件类

<script type="text/babel">
            let Greet=ReactDOM.createClass({
                render:function(){
                    return <h1>Hello {this.props.name}</h1>;
                }
            });
            ReactDOM.render(
                <Greet name='gmx' />,
                document.getElementById('root')
            )
</script>

但是控制台报错了：

ncaught TypeError: ReactDOM.createClass is not a function

查了一下是因为react最新版本抛弃了createClass这个函数，为了配合ES6，与时俱进，最新版本使用的是ES6，不支持以前的createClass方法了

下面的是新版本：

<script type="text/babel">
            class Greet extends React.Component{
                render(){
                    return(
                        <h1>Hello {this.props.name}</h1>
                    )
                }
            }
            ReactDOM.render(
                <Greet name='gmx'/>,
                document.getElementById('root')
            )
    </script>

注意：获取属性的值用的是this.props.属性名、创建的组件名称首字母必须大写、为元素添加css的class时，使用className、组件的style属性的设置方式也值得注意，要写成style={{width:this.state.width}}、变量名用{}包裹，且不能加双引号

组件&props

组件可以将ui切分成一些独立的、可复用的部件，这样你就只需要专注于构建每一个单独的部件

有两种方式定义组件：

1.函数定义组件：

function welcome(props){
  return <h1>Hello,{props.name}</h1>
}

2.类（ES6 class）定义组件

class welcome extends React.Component{
     render(){
        return <h1>Hello,{this.props.name}</h1>;
  }
}

看一个例子

function Welcome(props){
               return <h1>Hello,{props.name}</h1>
           }
           const element=<Welcome name='gaominxue' />
           ReactDOM.render(
               element,
               document.getElementById('root')
               );

解析：

我们对<Welcome name="gaominxue" />元素调用了ReactDOM.render()方法

React将{name: 'gaominxue'}作为props传入并调用Welcome组件

Welcome组件将<h1>Hello, gaominxue</h1>元素作为结果返回

React DOM将DOM更新为<h1>Hello, gaominxue</h1>

组合组件，组件之间还可以嵌套：

 function Welcome(props){
               return <h1>Hello,{props.name}</h1>
           }
           function App(){
               return (
                   <div>
                      <Welcome name='gao'/>
                      <Welcome name='min'/>
                      <Welcome name='xuexue'/>
                    </div>
               )
           }
           ReactDOM.render(
               <App />,
               document.getElementById('root')
               );

App此时也是一个组件，内部包含Welcome组件，特别注意一点的就是组件的返回值只能有一个根元素。return 中使用一个div来包裹所有的元素。

在这里附上学习react的文档，我觉得特别好，特别适合刚学的同学：https://segmentfault.com/a/1190000011336838