2020-07-23

原创

React笔记

React创建

浏览器中通过标签直接引入

React框架有两个核心的包，分别是react以及react-dom,如何想直接在浏览器中使用React，那么把这两个包直接引入就可以了。

<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

如果想要使用JSX语法，那么必须引入Babel。

<!-- 引入Babel,使浏览器可以识别JSX语法，如果不使用JSX语法，可以不引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

使用官方脚手架creact-react-app（推荐）

npx create-react-app <项目名>

npx create-react-app my-app

cd my-app
npm run start

创建成功目录

React元素渲染

react是一个全面使用JavaScript的框架，创建元素用的jsx

比如我创建一个

let htnls=(
  <div>
    <h1>测试</h1>
  </div>
)

使用

ReactDOM.render(htnls,document.getElementById("root"))  root为根节点

如图

并且可以引入css,如：

let styloStop = {
  backgroundColor: "aquamarine",
  border: " 1px solid"
}
let htnls=(
  <div>
    <h1 style={styloStop}>测试</h1>
  </div>
)

可以用{}引入变量函数等

样式写法

backgroundColor: "aquamarine"或者

”background-color”: "aquamarine"；

注释

{/*

测试

*/}

必须在{}中注释

组件

React组件有2种，函数组件，类组件

函数组件

// 函数组件
function Change(props) {
  console.log(props.name);

  let name = props.name || 'xxx';
  return (
    <div>
      {html}
      {name}
    </div>
  )
}

类组件

类组件
class Leizujian extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    console.log(this);
    return (
      <div>
        <Change name={this.props.name}/>
      </div>
    )

  }
}

运行

ReactDOM.render(<Leizujian name="小邓" />, document.getElementById('root'));

组件传值

父传子

直接在引用设置xxx="111"

比如

ReactDOM.render(, document.getElementById('root'));

name="小邓"；

接收：

类组件：this.props.xxx

函数：必须接收function xx(props){

console.log(props)

}

子传父

父传函数给子，子接收函数把数据以传惨的形式

React生命周期函数

初始化

1.getDefaultProps()

注：getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的如果使用的是es6的语法，例如用的是class 组件名 extends React.Component的话，就不要用 getDefaultProps这种方式去定义props了，而是应该用 static propTypes ＝｛｝来定义，这样就不会有警了

     设置默认的props，也可以用dufaultProps设置组件的默认属性. ---》设置

2.getInitialState()

注：与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义 this.state。此时可以访问this.props

3.componentWillMount()

注：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4. render()

注：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5.componentDidMount()

注：组件渲染之后调用，只调用一次。可以在此请求数据

更新

1.componentWillReceiveProps(nextProps)

注：组件初始化时不调用，组件接受新的props时调用。

2.shouldComponentUpdate(nextProps, nextState)

注：react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

3.componentWillUpdata(nextProps, nextState)

注：组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

4.render()

注：组件渲染

5.componentDidUpdate()

注：组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

卸载

componentWillUnmount()

注：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

图解

修改变量值this.setState()

一般需要修改一个变量或者值需要在this.setState({item=xxxx})修改

点击事件和传值

绑定点击事件或者别的事件：onXXXX

点击：onClick={this.xxx}

传值：data-index="111" 获取值：xxx(e){e.target.dataset.index}

如：

React事件

驼峰命名法

{}中传入一个函数，而不是字符串

如：

阻止默认行为

e.preventDefault()

React条件运算

jsx里面写的条件和JavaScript的一样 if..else 三运算符；

直接通过条件运算渲染jsx

class Leizujian extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      its: false
    }
  }
  render() {
    let its = null;
    if (this.state.its) {
      its = <Suts />;
      return (直接通过条件运算 渲染jsx
        <div>
          <span>{this.state.its}</span>
          <button onClick={this.setts}>点击</button>
          {its}
        </div>
      )
    } else {
      its = <div>false不显示</div>;
      return (
        <div>
          <span>{this.state.its}</span>
          <button onClick={this.setts}>点击</button>
          {its}
        </div>
      )
    }
    
  }
  setts = () => {
    console.log(this.state.its);
    this.setState({
      its: true
    })
  }
}
function Suts() {
  return (<div>
    子组件
  </div>)
}
ReactDOM.render(<Leizujian />, document.getElementById('root'));

通过jsx对象渲染在模板中

class Leizujian extends React.Component {
constructor(props) {
 super(props)
 this.state = {
   its: false
 }
}
render() {
 let its = null;
 if (this.state.its) {
   its = <Suts />;
 } else {
   its = <div>false不显示</div>;
 }  jsx对象渲染在模板中
 return (
   <div>
     <span>{this.state.its}</span>
     <button onClick={this.setts}>点击</button>
     {its}
   </div>
 )
}
setts = () => {
 console.log(this.state.its);
 this.setState({
   its: true
 })
}
}
function Suts() {
return (<div>
 子组件
</div>)
}

三元运算符

 return (
      <div>
        <span>{this.state.its}</span>
        <button onClick={this.setts}>点击</button>
        {its}
        三元运算符
        {this.state.its?<Suts/>:<div>false不显示</div>}
      </div>
    )

React列表循环

需要把数据转化成自己的模板

map forin 等方法

如：

class Leizujian extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      its: false
    }
    this.itys = {
      list: [
        {
          title: '1',
          content: '测试一'
        },
        {
          title: '2',
          content: '测试二'
        },
        {
          title: '3',
          content: '测试三'
        }
      ]
    }
  }
  render() {
    let itsyun = [];转换
    this.itys.list.map((item,index) => {
      let is = (
        <li key={index}>
          <h2>{item.title}</h2>
          <p>{item.content}</p>
        </li>
      )
      return itsyun.push(is)
    });
    return (
      <div>
        <span>{this.state.its}</span>
        <button onClick={this.setts}>点击</button>
        <ul>
          {itsyun}
        </ul>
      </div>
    )
  }

}
ReactDOM.render(<Leizujian />, document.getElementById('root'));

或者循环组件

或者直接return

class Leizujian extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      its: false
    }
    this.itys = {
      list: [
        {
          title: '1',
          content: '测试一'
        },
        {
          title: '2',
          content: '测试二'
        },
        {
          title: '3',
          content: '测试三'
        }
      ]
    }
  }
  render() {
    return (
      <div>
        <span>{this.state.its}</span>
        <button onClick={this.setts}>点击</button>
        <ul>
          {
            this.itys.list.map((item, index) => {
              return (
                <li key={index} onClick={(enent)=>              {this.itsaa(item.content,index,enent)}}>
                  <h2>{item.title}</h2>
                  <p>{item.content}</p>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
  itsaa(item, index, enent) {
     alert(item+index)
  }
}
ReactDOM.render(<Leizujian />, document.getElementById('root'));

React

前端基础

作者：渣渣前端（联系作者）

发表时间：2020-07-23 18:06

公众号转载：请在文末添加作者公众号二维码

React笔记一（无图版）