React初步

今天整理一下自己关于react的学习笔记。

什么是React？

学习某一个框架首先得知道这个框架是干什么的，它的特点是什么，有哪些优点和缺点。

• React有4个特点
  • 组件化
  • 虚拟DOM
  • 单项数据流
  • jsx

与Angular的不同点

• Angular借鉴了MVC的思想，达到减少DOM操作的目的
• React并非MVC框架，只能算是MVC中的V，引入了组件化开发的思想

React的实现原理

1. React内部有一个虚拟的DOM树，先在内部修改虚拟DOM，再判断虚拟DOM与实际DOM的区别，然后进行替换。
2. 把整个页面划分成一个一个组件，小组件组成大组件。做成组件之后，优点是组件的重用度很高。
3. 用React写的网页速度快的原因是由于使用了虚拟DOM，虽然可以操作真是DOM，但是不要这样做，不然就失去了虚拟DOM的特性。

基础代码

ReactDOM.render(); //渲染
var helloElement = React.createElement("h1",null,"Hello,React!!!); //里边的null是用来添加CSS属性的
var pElement = React.createEleement("p",null,"这是正文内容");
var divElement = React.createElement("div",{style:{color:"red"}},[helloElement,pElement]);
ReactDOM.render(divElement,document.getElementById("content");

 

以上是实现React的最基本的语法，把helloElement和pElement的放入到divElement的组件中，然后把divElement的组件插入到页面中的div中。

JSX语法，类似html,但和html不同

语法要求比较严格，需要正确的结束符，创建模块组件，变量名需要首字母大写（大驼峰）。

<script type="text/babel"></script>

JSX语法需要通过转换成js代码才能够执行，转换分为两种方式， 分别是在线转，引入browser.min.js文件（开发阶段）； 转换以后再执行（上线阶段）

<script type="text/babel">
    ReactDOM.render(<h1>Hello</h1>,document.getElementById("content");
    
    var element = (<div><h1>hello</h1><p>正文内容</p></div>);
    ReactDOM.render(element,document.getElementById("content"));
    
    //用class的时候要用className;
    //style={{fontSize:"30px"}};
</script>

<script type="text/babel">
    var DivElement = React.creatClass({
        render:function(){
            return <div><h1>hello</h1><p>正文</p></div>;
        }
    });
    ReactDom.render(<DivElement />,document.getElementById("content");
</script>

 

循环数组

<script type="text/babel">
    var ary = ["a","b","c","d","e"];
    var ListElement = React.createClass({
        render:function(){
            var lis = [];
            for(var i=0;i<ary.length;i++){
                lis.push(<li>{ary[i]}</li>);
            }
            return <ul>{lis}</ul>
        }
    });
</script>

 

this.props 组件之间的数据传递

this.props.属性名  用来获取传给他的属性。

this.props.children  用来获取标签中的文本内容。

如何划分组件

划分组件的原则是，不能让每个组件的功能变多，也不能让组件的功能过于单一。

React 模块化开发

下载三个插件

• npm install babel-preset-react
• npm install react
• npm install react-dom

一个组件写成一个文件。

React 要实现交互功能，需要state（状态）

Reactjs component 中 prop 和 state 的区别

props和state都是用于描述component状态的，并且这个状态应该是与显示相关的。

State

如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。 例如：一个购物车的component，会根据用户在购物车中添加的产品和产品数量，显示不同的价格，那么“总价”这个状态，就应该用state表示。

Props

如果component的某些状态由外部所决定，并且会影响到component的render，那么这些状态就应该用props表示。 例如：一个下拉菜单的component，有哪些菜单项，是由这个component的使用者和使用场景决定的，那么“菜单项”这个状态，就应该用props表示，并且由外部传入。