React的组件

React的组件化思想尤为明显，一切皆组件，觉着比Vue的组件化思想更加凸显。

const PacketBG = (props) =>(
     <div className="packet-bg">
        <div className="packet-wrap">
            <p>{props.name}</p>
            <div className="packet-txt">{props.wishTxt}</div>
            <div className="open-packet" onClick={props.onClick}></div>
        </div>
     </div>
)
PacketBG.defaultProps = {
    name:'Jack',
    wishTxt:'阖家欢乐，万事如意'
}

React组件也可以实现数据和模板分离，可以写defaultProps,也可以通过使用组件时候给props的属性赋值。

组件之间的互相通讯是通过props来传递的，这个很重要！

State和Props组合使用：可以在父组件中设置state，然后通过子组件的props将其传递到子组件上。

React的数据单向流，自顶向下，从父组件到子组件的流向。

组件的事件处理：

事件绑定采用驼峰写法： <div onClick={props.onClick}>知道了</div>

而且不能使用返回return false来阻止默认行为，必须使用preventDefault。

1，组件列表的实现：

const ListItem = (props)=>(
    <li>{props.value}</li>
)
const ComponetOne = (props)=>{
    const numbers = props.numbers;
    return (
        <ul>
            {numbers.map((n,index)=>(
                <ListItem key={index} value={n}/>
            ))}
        </ul>
    )
}

组件列表必须有key，在使用时候：<ComponetOne numbers={this.state.numbers}/>

2，React组件的API：

setState(nextState,callback)

 //setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
 this.setState({numbers:[7,8,9]},()=>alert(1))

nextState会合并到当前的state当中，并且重新渲染组件,并且还有回调函数。

replaceState(nextState,callback) //替换当前的state

setProps(nextProps,callback) //props是组件的数据流，总是从父组件流向子组件，setProps触发子组件重新渲染。

replaceProps(nextPrps,callback) //替换当前props

forceUpdate(callback) //强制更新

注意：

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

setState的状态更新可能是异步的，所以需要接受一个函数，而不是对象。状态的更新合并是浅合并，类似：Object.assign()；

3，props是只读的，意思是说子组件从父组件中传过来的props变量，在子组件内部不能修改，子组件对于从父组件上流传递下来的数据没有控制权。但是可以通过类似input的onChange事件属性，告知父组件，让父组件帮忙修改！

比如：我们要改变一个子组件的状态，若子组件本身具有state状态，那么内部改变其状态可以使用this.setState来更新状态，而若是从上流父组件下面传递来的props值，那么更新其状态，则需要this.props.onHandleChange()事件，告知上流父组件，让其帮忙更新【通常是父组件内部的state】。

React的状态提升：几个组件共用状态数据的时候，可以将共享的数据提升至他们最近的父组件当中统一管理，就达到了状态共享。

4，react组件的组合使用：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

该组件在使用时，props.children类似一个卡槽，JSX标签内的所有内容通过children传入FancyBorder中。如果需要多个入口的话，比如{props.content1},{props.content2},content1和content2可以是两个不同的组件，这样子就构成了组合组件。

React不推荐使用继承，而推荐使用组合组件！

5，React项目的理念思路：

理想情况下，根据“单一功能原则”，一个组件应该只做一件事情。一般构建UI思路自顶向下，也就是先整体后部分，在大型项目中，也可以先部分再整体。

6，JSX组件也可以使用点表示法：

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

MyComponents里面有多个属性，属性值都是JSX组件，父组件使用中可以使用点表示法。

7，组件命名必须大写字母开头，如果是小写开头的标签会被认为是HTML原生标签，JSX的标签名可以是大写开头的变量，这样子的话，组件就是动态的了！

8，React组件的属性，如果没有给属性值，默认是true，下面两个JSX的使用是等价的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

9，组件的展开属性：

如果props的属性比较多，可以使用对象的展开符...来传递

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

10，Javascript中针对类型检查的库有Flow,TypeScript等，react自v15.5开始，使用prop-types库来进行类型检查。

Flow是Facebook开发的，经常和React一起使用，是专门针对javascript代码的静态类型检查器，可以使用npm进行添加。create-react-app脚手架默认是剥离Flow的。

TypeScript是由微软开发的，可以使用npm进行添加依赖。

11 ，react的ref的用法，目前字符串已废弃，全新的是React.createRef()，是React16.3提供的。

最早的时候在dom上面this.refs[‘inputRef’]来访问Dom，而最新的reactApi推荐通过ref的current属性来拿到dom节点。赋值：this.myRef = React.createRef()；然后将ref={this.myRef}挂载dom标签上，访问时通过this.myRef.current来确定dom元素。

React.createRef()方法接收底层DOM元素作为current属性以创建ref。

不能在函数式组件上使用ref，因为它们没有实例！！！想要使用ref，生命周期方法，或者state，必须使用class组件！

回调Refs：在实例属性中存储对DOM节点的引用！

注意：String版本的ref已被移除，如果以前还在使用，建议用回调函数方式代替。

12，react组件是react的核心所在，那么react元素是由JSX创建，这个是必须知道的，而渲染则是通过生命周期函数render()，跟浏览器的交互方法，则会放置在componentDidMount()的生命周期方法中或其他生命周期中。

13，一般网络请求都会放在componentDidMount(）中，然后在componentWillUnmount()方法中解除定时器，取消网络请求，清理订阅等。componentDidUpdate()是组件更新时候调用，也就是state更新时候会触发，如果state没有改变，那么将不会调用该函数。

在react中发送Ajax请求，可以搭配Axios，jQuery AJAX,浏览器内置的window.fetch都可以。

【未完待续】

新年flag6——

posted @ 2019-02-14 16:43 tangjiao_Miya 阅读(239) 评论(0) 编辑收藏举报

刷新页面返回顶部

tangjiao_Miya

React的组件

公告