原创

React笔记一(无图版)


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

创建成功目录

image-20200702181205268

React元素渲染

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

比如我创建一个

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

使用

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

如图

image-20200702181918746

并且可以引入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()

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

图解

image-20200702184711977

修改变量值this.setState()

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

点击事件和传值

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

点击:onClick={this.xxx}

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

如:

image-20200713115403886

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
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 公众号转载:请在文末添加作者公众号二维码
  • 评论