react 学习

最新推荐文章于 2024-08-28 11:25:19 发布

csdn_Damon

最新推荐文章于 2024-08-28 11:25:19 发布

阅读量960

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/github_35041937/article/details/52181979

找到基础视频教程一个是慕课网的react 用pad下载的

一个是宁浩网的视频，不放链接了。

react 搭建需要哪些知识？

引用书籍：React 引领未来的用户界面开发框架

基础：

1：JSX JS中编写声明式XML方法。

2：管理组件的生命周期

3：数据流，数据流如何在组件树种上下传递，哪些数据可以修改，props 和state的区别和联系。

4：事件处理

5：组件的复合

6：mixin — 组件共享

进阶：

1：DOM 操作： React 哪些生命周期可以安全使用DOM 什么时候释放DOM 避免内存泄漏

2：表单：HTML 表单 ,React 组件中有HTML表单的状态，提供了控制力。

3：动画：给React 添加 CSS 动画。

4：性能优化：当组件没有发生变化的时候，告诉渲染器无需渲染组件。

5：服务端渲染：非浏览器环境下也能渲染，如何做同时支持服务端和客户端的渲染。

6：周边类库：如何把周边类库与React 组合到一起。

工具：

1.开发工具：自动打包React 。使用chorme 可视化React 组件，简化测试。

2.测试工具：编写测试。

实践：

16：架构模式：React 的大规模应用

17：其他使用场景：除了Web以外的使用场景。

图示为

这里写图片描述

找到源码 http://blog.youkuaiyun.com/mqy1023/article/details/51755426

照着敲

在线测试网站：

http://jsbin.com/?html,output

react 不能写放弃使用

编写这个需要引入本地的react 库

使用webstorm编程

这里写图片描述

会报错，暂时用在线工具学习语法

使用JSfiddle
http://jsfiddle.net/reactjs/69z2wepo/

这里写图片描述

—–JSX 语法——

html 部分需要引入react 资源

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

html body 部分

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

渲染通过DOM，获取到container，然后变更html内容。最外层用div包裹起来，里面的的部分再单独写var 变量引用进来就好了。

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

<We/>

指的是

var We = React.createClass({
  render: function() {
    return <h1>
    wwwwwwwwwwwwwwww
    </h1>;
  }
});

同理

 <Hello name="world"/>

指的是 hello变量包含属性为name

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

因此打印结果为：

wwwwwwwwwwwwwwww

Hello My world

打印日期信息语句

var text = ['hello', ' world!'];

function date2String(d) {
    return [
            d.getFullYear(),
            d.getMonth() + 1,
            d.getDate(),
    ].join('-');
};

var LabelText = React.createClass({
    render: function() {
        return <div>{text}, {date2String(new Date())}</div>;
    }
});

添加到div 中

<LabelText />

结果

hello world!, 2016-8-12

继续
数组的写法：

var names = ['Alice', 'Emily', 'Kate'];

DOM里面添加

    <div>
    {
      names.map(function (name) {
        return <div>Hello, {name}!</div>
      })
    }
    </div>,

结果，遍历了names数组里的元素，注意加个div包裹起来

Hello, Alice!
Hello, Emily!
Hello, Kate!

当遇到 < JSX就当HTML解析，遇到 { 就当JavaScript解析。

================================================
jsfiddle 有时候会无法访问,然后数据就都丢了,或者长时间无法显示

尝试使用subline

找到一些封装好的开源组件
http://madscript.com/boron/

http://madscript.com/halogen/

更换为阮一峰的教程：

http://www.ruanyifeng.com/blog/2015/03/react.html

下载他的demo 跑起来试一下

WebStrom 打开还是语法报错，只是不影响使用，

程序可以正常运行

这里写图片描述

继续研究

================================================

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });
      var Hello = React.createClass({
        render: function() {
          return <HelloMessage name="John" />;
        }
      });
      var ElementFirst = React.createClass({
        render: function() {
          return <div>
          <Hello/>
          <Hello/>
          <Hello/>
          <Hello/>
          </div>;
        }
      });

      ReactDOM.render(
              <div>
       <ElementFirst />
              </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

运行结果

Hello John
Hello John
Hello John
Hello John

render 只用div包裹一个ElementFirst，

  ReactDOM.render(
              <div>
       <ElementFirst />
              </div>,
        document.getElementById('example')
      );

结构都放到ElementFirst 函数里

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

这样写起来就全部分开了,叫做组件化

子类：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      });

      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

结果

这里写图片描述

分析结构：

组件 NotesList

这里是用组件化来写 html 的列表代码 html 结构

如果是 html 的写法

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

结果

这里写图片描述

组件化的写法创建 NotesList 组件

var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      });

其中

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

这段代码的意思是遍历组件的子节点，传入节点，

按照序列排布

然后在DOM中编写NotesList子节点

        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,

明显 hello 和world 的span节点是NotesList子节点child，

自然会按照li的顺序排布到里面去了，

这样可以把子节点分离出来。

关键代码 this.props.children 代表子节点

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

prop还可以设置默认属性

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

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

—————DOM 属性————–

1.ref允许在render之外进行访问

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
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={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
    </script>
  </body>
</html>

这里写图片描述

关键点

  <input type="text" ref="myTextInput" />

添加id

  handleClick: function() {
    this.refs.myTextInput.focus();
  },

通过id获取到对象，执行对象的方法。

注意点：

组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

this.state

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

设置liked初始状态为false 不喜欢

  getInitialState: function() {
    return {liked: false};
  },

设置函数handleClick，点击时 like取反

  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },

设置 text的内容三目运算符

    var text = this.state.liked ? 'like' : 'haven\'t liked';

具体内容，点击添加函数onClick={this.handleClick}

 <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>

未点击时

这里写图片描述

点击了以后

这里写图片描述

表单更新

使用 State 不要使用 prop

var Input = React.createClass({
//设置初始state值  value 为hello
  getInitialState: function() {
    return {value: 'Hello!'};
  },
 //函数设置state变化，把事件目标的value传递过来
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },

  render: function () {
  //设置value变量,代表state里的value数值
    var value = this.state.value;
    return (
      <div>
      //一个input输入框
        <input type="text" value={value} onChange={this.handleChange} />
        //显示state里的value数值
        <p>{value}</p>
      </div>
    );
  }
});

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