李锋涛

石看纹理山看脉,人看志气树看材

  • 主页
所有文章 友链 关于我

李锋涛

石看纹理山看脉,人看志气树看材

  • 主页

React学习—

2018-08-20

一:HTML 模板

 例如: <script src="../build/react.js"></script>  //react的核心库
<script src="../build/react-dom.js"></script>  //提供Dom的相关功能
<script src="../build/browser.min.js"></script> //将JSX语法转换成js语法

二:ReactDom.render()

<div id="example"></div>
<script type='text/babel'>
    ReactDOM.render(
    <h1>Hello, world!</h1>,    
    document.getElementById('example')
)
</script>
     总结: JSX部分的script 要加上type='text/babel'   在script里面写ReactDOM.render(
  把元素添加到里面元素里面)

三:jsx语法

HTML语言直接写在Javascript语言中,不加任何引号,就是JSX语法
  <div id="example"></div>
 <script type="text/babel">
    var names = ['Alice', 'Emily', 'Kate'];
    ReactDOM.render(
     <div>
    {
     names.map(function(name,index){
      return <div key={index}>{name }</div> })
     }
     </div>,
     document.getElementById('example')
)
</script>
      总结:这个div标签就是JSX语法。
     JSX语法,最终会被编译为 createElement() 方法
                  推荐:使用 JSX 的方式创建组件
        注意:1:如果在JSX里面添加类,用className代替class. for用htmlFor
      2:在 JSX 中可以直接使用 JS代码,直接在 JSX 中通过 {} 中间写 JS代码即可
      3:在 JSX 中只能使用表达式,但是不能出现 语句!!!
      4:在 JSX 中注释语法:{/* 中间是注释的内容 */}

四:组件

创建组件的三种方法
React.createClass 方法就是用于生成一个组件类
  <div id="example"></div>
  <script type="text/babel">

1):用React.createClass创建一个组件 HellowMessage

  var HelloMessage=React.createClass({
  render:function(){
    return <h1>Hello {this.props.name}</h1>;
}
});
 //在html中输出
 ReactDOM.render(
    //要有闭合标签
    <HelloMessage name='join'/>,  
   //输入到页面
   document.getElementById('example')
 )
 </script>
注意:首字母一定要大写。第二个是,每个组件都要有一个render的方法,用于输出组件。

2): 第二种方式创建组件 通过js函数创建(无状态组件)

          例:function Welcome(props) {
  return (
  // 此处注释的写法 
 <div className="shopping-list">
 {/* 此处 注释的写法 必须要{}包裹 */}
  <h1>Shopping List for {props.name}</h1>
  <ul>
  <li>Instagram</li>
  <li>WhatsApp</li>
   </ul>
    </div>
    )}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('app')
)
注意: 1 函数名必须是大写,react通过这来判断是不是组件
2 函数必须有返回值(return),返回值可以是:JSX对象或null
3 返回的JSX,必须有一个根元素(如例的div)
4 组件的返回值使用()包裹,避免换行问题

3): class创建组件 (有状态组件)

class ShoppingList extends React.Component {
      constructor(props) { 
        super(props)
      }
      // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
            </ul>
          </div>
        )
      }
    }
注意点和别的创建组件一样。
区别和使用场景:
1:如果一个组件仅仅是为了展示数据,那么此时就可以使用 函数组件
2:如果一个组件中有一定业务逻辑,需要操作数据,那么就需要使用 class 创建组件,因为,此时需要使用 state

给组件传递数据 - 父子组件传递数据

1: 可以理解为props为从外部传入组件内部的数据。因为react是单向数据流,所以,基本就是props从父级组件向子组件传递数据。
 2:通过this.props来获取传递该组件的所有的数据
 3:props经常被用作渲染组件和初始化状态,它是只读的,不可改变的。
props的默认参数
在组件中,我们为props参数设置一个defaultProps,并且制定它的类型
例如:Item.defaultProps = {
    item: 'Hello Props',
  };
  设置类型
  Item.propTypes = {
    item: PropTypes.string,
  };    
  关于其他的一些类型:
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,       
总结:props是一个从外部传进组件的参数,主要就是从父组件向子组件传递数据。它具有可读性和不变性。
只能通过外部组件传新的props来渲染子组件。否则子组件的props以及展现形式不会改变。

关于state (相当于vue里的data)

通过this.state给组件设定一个初始的state,在第一次render的时候就会用这个数据来渲染。
state是可以改变的,但是是通过this.setState()方法来修改state.
例:componentDidMount(){
fetch('url')
.then(response => response.json())
 .then((data) => {
 this.setState({itemList:item});  
}
}
        当我们调用this.setState方法时,React会更新组件的数据状态state,并且重新调用render方法,也就是对组件重新进行渲染。
注意:
通过this.state=来初始化state,使用this.setState来修改state,constructor是唯一能够初始化的地方。
setState可以传两个参数,
1 setState接受一个对象或者函数作为第一个参数,只需要传入需要更新的部分即可,不需要传入整个对象
2 setState还可以接受第二个参数,它是一个函数,会在setState调用完成并且组件开始重新渲染时被调用,可以用来监听渲染是否完成:
state总结
state的主要作用是用于组件保存、控制以及修改自己的状态,它只能在constructor中初始化,它算是组件的私有属性,不可通过外部访问              和修改,只能通过组件内部的this.setState来修改,修改state属性会导致组件的重新渲染。

关于state和props的区别

1 state是组件自己管理数据,控制自己的状态,可变
2 props是外部传入的数据参数,不可变;
3 没有state的叫做无状态组件,有state的叫做有状态组件;
4 多用props,少用state。也就是多写无状态组件。
赏

谢谢你请我吃糖果

  • react

扫一扫,分享到微信

微信分享二维码
Vue中关于路由
react学习二 生命周期
© 2018 李锋涛
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • AngularJs
  • css
  • css3
  • js
  • Gulp
  • html5
  • react
  • Vue
  • bootstrap
  • css 布局
  • github
  • hexo
  • git
  • html
  • jQuery
  • webpack
  • ES6
  • app
  • hexo+github

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 阮一峰
很惭愧

菜鸟一枚
笔记只为自己参考学习